zoukankan      html  css  js  c++  java
  • 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具体界面的介绍。

  • 相关阅读:
    5.19 省选模拟赛 T1 小B的棋盘 双指针 性质
    5.15 省选模拟赛 容斥 生成函数 dp
    5.15 省选模拟赛 T1 点分治 FFT
    5.15 牛客挑战赛40 B 小V的序列 关于随机均摊分析 二进制
    luogu P4929 【模板】舞蹈链 DLX
    CF 878E Numbers on the blackboard 并查集 离线 贪心
    5.10 省选模拟赛 拍卖 博弈 dp
    5.12 省选模拟赛 T2 贪心 dp 搜索 差分
    5.10 省选模拟赛 tree 树形dp 逆元
    luogu P6088 [JSOI2015]字符串树 可持久化trie 线段树合并 树链剖分 trie树
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/7216790.html
Copyright © 2011-2022 走看看