1. 程式人生 > >app具體介紹界面-01

app具體介紹界面-01

重用 lin and generate i++ rep data int 導航欄

在我們的上一篇博客中,我們介紹了首頁中的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具體界面的介紹。

app具體介紹界面-01