app具体介绍界面-01

在我们的上一篇博客中，我们介绍了首页中的app列表界面怎样完毕。这个ListView以及其Adapter会在我们后面的界面中重用，所以这个是比較重要的，在这一篇博客中，我们先完毕app具体介绍界面的一部分，当我们点击ListView的每个item的时候，会进入我们这个界面进行app的具体介绍。

我们先来看一下效果图。

这个小界面还是比較简单的。

首先我们先要完毕上面的一个导航栏，当中包含左面的箭头和中间的文字以及颜色。

我们在res/layout目录以下创建一个新的文件。命名为activity_app_detail.xml

我们先来看一下上面的导航栏的代码：

    <RelativeLayout
            android:id="@+id/rl_app_detail_title"
            android:layout_width="fill_parent"
            android:layout_height="@dimen/bar_height"
            android:layout_alignParentTop="true"
            android:background="@color/mbarcolor" >

            <TextView
                android:id="@+id/tv_app_detail_back"
                android:layout_width="@dimen/bake_size"
                android:layout_height="@dimen/bake_size"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:background="@drawable/button_back"
                android:clickable="true"
                android:gravity="center" />

            <TextView
                android:id="@+id/tv_app_detail_appName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:gravity="center"
                android:text="详情"
                android:textColor="@color/white"
                android:textSize="24sp"
                android:textStyle="bold" />
        </RelativeLayout>

以下我们看一下，颜色mbarcolor的定义，该颜色定义在res/color/color.xml 文件里。代码例如以下：

<color name="mbarcolor">#29abe2</color>

以下我们来定义后面的那个显示app图片和其它信息的显示界面。我们在文件activity_app_detail.xml文件里接着续上后面的代码：

      <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/rl_app_detail_title" >

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <RelativeLayout
                    android:id="@+id/rl_general"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/mbarcolor" >

                    <ImageView
                        android:id="@+id/iv_app_icon"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="5dp"
                        android:background="@drawable/icon4" />

                    <RelativeLayout
                        android:id="@+id/rl_tv_detail"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="3dip"
                        android:layout_marginTop="5dp"
                        android:layout_toRightOf="@+id/iv_app_icon" >

                        <TextView
                            android:id="@+id/tv_app_name"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="酷我音乐"
                            android:textColor="@color/white"
                            android:textSize="18sp" />

                        <LinearLayout
                            android:id="@+id/ll_rank"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_below="@id/tv_app_name"
                            android:layout_marginTop="3dp"
                            android:orientation="horizontal" >

                            <ImageView
                                android:layout_width="15dp"
                                android:layout_height="15dp"
                                android:background="@drawable/star_on" />

                            <ImageView
                                android:layout_width="15dp"
                                android:layout_height="15dp"
                                android:background="@drawable/star_on" />

                            <ImageView
                                android:layout_width="15dp"
                                android:layout_height="15dp"
                                android:background="@drawable/star_on" />

                            <ImageView
                                android:layout_width="15dp"
                                android:layout_height="15dp"
                                android:background="@drawable/star_on" />

                            <ImageView
                                android:layout_width="15dp"
                                android:layout_height="15dp"
                                android:background="@drawable/star_off" />
                        </LinearLayout>

                        <RelativeLayout
                            android:id="@+id/rl_down_size"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_below="@id/ll_rank"
                            android:layout_marginTop="3dp" >

                            <TextView
                                android:id="@+id/tv_app_size"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="18.92M"
                                android:textColor="@color/white"
                                android:textSize="12sp" >
                            </TextView>

                            <TextView
                                android:id="@+id/tv_down_count"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="8dp"
                                android:layout_toRightOf="@id/tv_app_size"
                                android:text="57288次下载"
                                android:textColor="@color/white"
                                android:textSize="12sp" />
                        </RelativeLayout>
                    </RelativeLayout>

                    <View
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_below="@id/iv_app_icon"
                        android:layout_marginTop="5dp" />
                </RelativeLayout>
            </RelativeLayout>
        </ScrollView>

在这里我们定义成ScrollView，由于在后面还有非常多内容须要加入。

好了，这里我们就定义好我们的界面了，接着。我们创建一个Activity来显示该界面，以及为首页上的ListView加入监听来跳转到这个界面中来。

在src/com.sdu.activities中创建AppDetailInfoActivity，继承自BaseActivity.

    package com.sdu.activities;

    import com.sdu.androidmarket.R;

    import android.view.View;
    import android.view.Window;
    import android.widget.TextView;

    public class AppDetailInfoActivity extends BaseActivity {

        private TextView tv_app_detail_back;

        @Override
        public void initWidget() {
            // TODO Auto-generated method stub

            requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_app_detail);

            tv_app_detail_back = (TextView)findViewById(R.id.tv_app_detail_back);
            tv_app_detail_back.setOnClickListener(this);

        }

        @Override
        public void widgetClick(View v) {
            // TODO Auto-generated method stub
                switch(v.getId()){
                case R.id.tv_app_detail_back:
                    AppDetailInfoActivity.this.finish();
                    break;
                }
        }

    }

接下来，我们来看一下HomeActivity中ListView的监听。

    lv_apps.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?
> parent, View view,
                        int position, long id) {
                    // TODO Auto-generated method stub
                    Intent intent = new Intent(HomeActivity.this,AppDetailInfoActivity.class);
                    startActivity(intent);
                }
            });

好了，这样总体的工作就完毕了。对了。千万不要忘记在AndroidManifest.xml中注冊该Activity。

     <activity android:name="com.sdu.activities.AppDetailInfoActivity" >
            </activity>

这样，这个小界面就完毕了，大家自己完毕一下。看一下吧。在以下的文章中，我们继续完毕我们的app具体界面的介绍。