AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

安卓市场--首页2

2015-08-07 1120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 版权声明：您好，转载请留下本人博客的地址，谢谢 https://blog.csdn.net/hongbochen1223/article/details/47347453 在《首页1》这篇文章中，我们讲述了在首页中加入一个自定义的广告栏，下面我们将继续完成首页内容的添加。
版权声明：您好，转载请留下本人博客的地址，谢谢 https://blog.csdn.net/hongbochen1223/article/details/47347453

在《首页1》这篇文章中，我们讲述了在首页中加入一个自定义的广告栏，下面我们将继续完成首页内容的添加。

在我们在想法中就是在广告栏下面是一个ListView用于显示比较新的或者是下载量比较高的app。下面我们就来做这一项工作。

1：首先，我们需要在activity_home.xml文件中添加如一个ListView作为显示列表。该ListView的布局就是在广告栏的下面即可。

我们来看一下代码:


    <RelativeLayout 
            android:id="@+id/rl_apps"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/rl_advers">
            <ListView
                android:id="@+id/lv_apps"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="2dp"
                android:layout_marginTop="4dp"
                android:background="@drawable/shape_rectangle"
                android:cacheColorHint="#00000000"
                android:divider="@drawable/line_bg_blue"
                android:dividerHeight="1.0dp"
                android:fadingEdge="vertical"
                android:listSelector="@drawable/listview_item_bg"
                android:scrollbarStyle="outsideOverlay" >
            </ListView>
        </RelativeLayout>

其中就几个属性，我来说一下ListView中的一些属性问题。

  • 1：cacheColorHint：祛除ListView的拖动背景色。当我们使用自定义的ListView的时候，特别容易出现这个问题。当我们在拖动ListView滑动的时候，背景就会出现黑色。
  • 2：divider：指定ListView中的item之间的分割线
  • 3：dividerHeight：设置分割线的宽度
  • 4：fadingEdge：设置后上面和下面有黑色的阴影
  • 5：listSelector：设置ListView中的item被选中之后的图像
  • 6:scrollbarStyle：设置滚动条和分割线的覆盖问题

2：在这里我们重点看的就是shape_rectangle样式，这个是我们定义的一个圆角的drawable,其实xml内部节点为shape。这个其实在上面的博客中已经说到了，在这里我在上一次关于这个的代码：

shape_rectangle.xml


    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_pressed="true" android:drawable="@drawable/round_rectangle_bg_pressed" /> <!-- pressed -->  
    <item android:state_focused="true" android:drawable="@drawable/round_rectangle_bg_pressed" /> <!-- focused -->  
    <item android:state_selected="true" android:drawable="@drawable/round_rectangle_bg_pressed" /> <!-- selected -->  
    <item android:drawable="@drawable/round_rectangle_bg" /> <!-- default bg_list_item_normal -->  
    </selector>

round_rectangle_bg_pressed.xml


    <?xml version="1.0" encoding="utf-8"?>  
    <shape  
      xmlns:android="http://schemas.android.com/apk/res/android"  
      android:shape="rectangle"  
      ><!-- android:shape="" 表示是圆角矩形还是椭圆等等 -->  
        <solid android:color="#ffffff"/> <!-- 背景颜色 -->  

        <!-- padding 表示内部空间距离背景图片内部边距 的距离 -->  
         <padding android:left="10dp" android:top="5dp"   
                android:right="10dp" android:bottom="5dp" />  

         <stroke android:width="1dp" android:color="#cecece"/> <!-- 图片边框属性 -->  
          <corners android:radius="10dp" /> <!-- 圆角的程度 -->  
        <gradient android:startColor="#ffffff" android:centerColor="#ffffff"   
            android:endColor="#ffffff" android:type="linear" android:angle="90"   
            android:centerX="0.5" android:centerY="0.5" />     
    </shape>

round_rectangle_bg.xml


    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" >

        <!-- android:shape="" 表示是圆角矩形还是椭圆等等 -->
        <solid android:color="#ffffff" />
        <!-- 背景颜色 -->


        <!-- padding 表示内部空间距离背景图片内部边距 的距离 -->
        <padding
            android:bottom="5dp"
            android:left="10dp"
            android:right="10dp"
            android:top="5dp" />

        <stroke
            android:width="1dp"
            android:color="#cecece" />
        <!-- 图片边框属性 -->
        <corners android:radius="10dp" />
        <!-- 圆角的程度 -->
        <gradient
            android:angle="90"
            android:centerColor="#ffffff"
            android:centerX="0.5"
            android:centerY="0.5"
            android:endColor="#ffffff"
            android:startColor="#ffffff"
            android:type="linear" />

    </shape>

好了，到了这一步，我们的ListView也定义好了，下面我们该定义我们的ListView Item和相应的Adapter了。

3：定义ListView Item

在我们的res/layout文件夹下面创建lv_app_item.xml，其中根布局选择RelativeLayout。

我们看一下我们的代码是如何定义的。


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <RelativeLayout
            android:id="@+id/rl_app_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:layout_marginTop="2dp"
            android:layout_marginBottom="2dp">

            <!--
            <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/app_image"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginLeft="10dip"
                android:background="@drawable/noimage" />

            -->

            <ImageView
                android:id="@+id/app_image"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginLeft="5dip"
                android:background="@drawable/icon4" />

            <RelativeLayout
                android:id="@+id/rl_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_toRightOf="@id/app_image" >

                <TextView
                    android:id="@+id/tv_app_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text="@string/tv_name"
                    android:textColor="@color/black"
                    android:textSize="20sp" />

                <TextView
                    android:id="@+id/tv_down_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tv_app_name"
                    android:layout_marginTop="2dp"
                    android:text="6万次下载"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_app_size"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tv_app_name"
                    android:layout_marginLeft="8dp"
                    android:layout_marginTop="2dp"
                    android:layout_toRightOf="@id/tv_down_count"
                    android:text="3.62M"
                    android:textSize="12sp" />

                <TextView
                    android:id="@+id/tv_brief"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tv_app_size"
                    android:layout_marginTop="2dp"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text="手游福利平台，更有海量精品游戏奥"
                    android:textSize="10sp" >
                </TextView>
            </RelativeLayout>

            <ImageView
                android:id="@+id/iv_download"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="5dip"
                android:background="@drawable/btn_icon_download_ring" />
        </RelativeLayout>

    </RelativeLayout>

我们看一下item的截图：

这里写图片描述

4:创建JavaBean类，保存app信息
为了能够在Adapter中显示app的信息，我们需要创建一个能够保存每一个app信息的类，我们称之为JavaBean。

在包com.sdu.beans下创建一个名为”AppBriefBean.java”文件，其中包含着app的一些信息以及对应的getters和setters方法。

我们来看一下:


    package com.sdu.beans;

    public class AppBriefBean {

        private String appID; /* app的唯一标识 */
        private String appIconAdd; /* app的图标的地址 */
        private String appName; /* app的名称 */
        private String appDownCount; /* app的下载次数 */
        private String appSize; /* app的大小 */
        private String briefInfo; /* app的简介 */
        private String appAddress; /* app的下载地址 */

        public AppBriefBean(String appID, String appIconAdd, String appName,
                String appDownCount, String appSize, String briefInfo,
                String appAddress) {
            super();
            this.appID = appID;
            this.appIconAdd = appIconAdd;
            this.appName = appName;
            this.appDownCount = appDownCount;
            this.appSize = appSize;
            this.briefInfo = briefInfo;
            this.appAddress = appAddress;
        }

        public String getAppID() {
            return appID;
        }

        public void setAppID(String appID) {
            this.appID = appID;
        }

        public String getAppIconAdd() {
            return appIconAdd;
        }

        public void setAppIconAdd(String appIconAdd) {
            this.appIconAdd = appIconAdd;
        }

        public String getAppName() {
            return appName;
        }

        public void setAppName(String appName) {
            this.appName = appName;
        }

        public String getAppDownCount() {
            return appDownCount;
        }

        public void setAppDownCount(String appDownCount) {
            this.appDownCount = appDownCount;
        }

        public String getAppSize() {
            return appSize;
        }

        public void setAppSize(String appSize) {
            this.appSize = appSize;
        }

        public String getBriefInfo() {
            return briefInfo;
        }

        public void setBriefInfo(String briefInfo) {
            this.briefInfo = briefInfo;
        }

        public String getAppAddress() {
            return appAddress;
        }

        public void setAppAddress(String appAddress) {
            this.appAddress = appAddress;
        }



    }

5：编写Adapter

在包com.sdu.adapters中创建一个明为”AppListAdapter.java”文件，该类继承自BaseAdapter。

按照创建Adapter的流程,首先我们需要有一个容器来保存每一个app的信息，我们这里使用ArrayList.


    /* 储存app信息的数据 */
    private ArrayList<AppBriefBean> appList;

然后再根据LayoutInfalter和Context获取对应的组件进行赋值即可。我们看一下AppListAdapter.java的完整程序。


    package com.sdu.adapters;

    import java.util.ArrayList;

    import com.sdu.androidmarket.R;
    import com.sdu.beans.AppBriefBean;

    import android.content.Context;
    import android.net.Uri;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;

    public class AppListAdapter extends BaseAdapter{

        /* 储存app信息的数据 */
        private ArrayList<AppBriefBean> appList;
        private LayoutInflater inflate;

        public AppListAdapter(ArrayList<AppBriefBean> appList,Context context){
            this.appList = appList;
            this.inflate = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return appList == null?0:appList.size();
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return appList.get(position);
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            Holder holder;

            if(convertView == null){
                holder = new Holder();

                convertView = inflate.inflate(R.layout.lv_app_item, null);
                holder.app_image = (ImageView)convertView.findViewById(R.id.app_image);
                holder.tv_app_name = (TextView)convertView.findViewById(R.id.tv_app_name);
                holder.tv_down_count = (TextView)convertView.findViewById(R.id.tv_down_count);
                holder.tv_app_size = (TextView)convertView.findViewById(R.id.tv_app_size);
                holder.tv_brief = (TextView)convertView.findViewById(R.id.tv_brief);

                convertView.setTag(holder);
            }else{
                holder = (Holder)convertView.getTag();
            }

            if(appList.get(position).getAppIconAdd() == null || appList.get(position).getAppIconAdd().equals("")){

            }else{
                holder.app_image.setImageURI(Uri.parse(appList.get(position).getAppIconAdd()));
            }

            if(appList.get(position).getAppName() != null)
                holder.tv_app_name.setText(appList.get(position).getAppName());

            if(appList.get(position).getAppDownCount() != null)
                holder.tv_down_count.setText(appList.get(position).getAppDownCount()+"次下载");

            if(appList.get(position).getAppSize() != null)
                holder.tv_app_size.setText(appList.get(position).getAppSize());

            if(appList.get(position).getBriefInfo() != null)
                holder.tv_brief.setText(appList.get(position).getBriefInfo());

            return convertView;
        }

        class Holder{
            ImageView app_image;
            TextView tv_app_name;
            TextView tv_down_count;
            TextView tv_app_size;
            TextView tv_brief;
        }

    }

6：初始化ListView（使用测试数据）

好了，Adapter也做好了，现在我们测试一下呗。在HomeActivity中使用测试数据进行对ListView的初始化，我们先来看一下实现代码：


    package com.sdu.activities;

    import java.util.ArrayList;

    import net.tsz.afinal.FinalBitmap;

    import com.sdu.adapters.AppListAdapter;
    import com.sdu.androidmarket.R;
    import com.sdu.beans.AppBriefBean;
    import com.sdu.ui.AdGallery;
    import com.sdu.utils.AppLog;

    import android.content.Intent;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.ListView;
    import android.widget.TextView;
    import android.view.Window;

    public class HomeActivity extends BaseActivity {

        private TextView tv_search;
        private TextView tv_contact;
        private ImageView iv_dia;

        private AdGallery app_advers;
        private LinearLayout ovalLayout; // 圆点容器

        /** 图片id的数组,本地测试用 */
        private int[] imageId = new int[] { R.drawable.test, R.drawable.test,
                R.drawable.test, R.drawable.test };

        /** 图片网络路径数组 */
        private String[] mris = {
                "http://img.my.csdn.net/uploads/201312/14/1386989803_3335.PNG",
                "http://img.my.csdn.net/uploads/201312/14/1386989613_6900.jpg",
                "http://img.my.csdn.net/uploads/201312/14/1386989802_7236.PNG" };

        /* 显示app的ListView */
        private ListView lv_apps;

        /* app ListView的适配器 */
        private AppListAdapter appsAdapter;

        /* 存放数据的array */
        private ArrayList<AppBriefBean> appsList = new ArrayList<AppBriefBean>();


        @Override
        public void initWidget() {
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_home);

            FinalBitmap.create(this); // android 框架 这里用于加载网络图片 

            tv_search = (TextView)findViewById(R.id.tv_search);
            tv_contact = (TextView)findViewById(R.id.tv_contact);
            iv_dia = (ImageView)findViewById(R.id.iv_dia);

            lv_apps = (ListView)findViewById(R.id.lv_apps);

            /**测试一下 */
            appsList.add(new AppBriefBean("1", null, "360游戏大厅", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "小时代", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "360免费wifi", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "全民2048", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "58同城", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "开心消消乐", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "看点", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));
            appsList.add(new AppBriefBean("1", null, "神庙逃亡2", "100", "2.34M", "手游福利平台，更有海量精品游戏奥", null));

            appsAdapter = new AppListAdapter(appsList, getApplicationContext());
            lv_apps.setAdapter(appsAdapter);

            tv_search.setOnClickListener(this);
            tv_contact.setOnClickListener(this);
            iv_dia.setOnClickListener(this);


            app_advers = (AdGallery)findViewById(R.id.app_advers);
            ovalLayout = (LinearLayout) findViewById(R.id.ovalLayout);// 获取圆点容器

            // 第二和第三参数 2选1 ,参数2为 图片网络路径数组 ,参数3为图片id的数组,本地测试用 ,2个参数都有优先采用 参数2
            app_advers.start(this, mris, imageId, 3000, ovalLayout,
                            R.drawable.dot_focused, R.drawable.dot_normal);

            app_advers.setAdversOnItemClickListener(new AdGallery.AdversOnItemClickListener() {
                public void onItemClick(int curIndex) {
                    AppLog.error("点击的图片下标为:" + curIndex);
                    // System.out.println(curIndex);
                }
            });

            lv_apps.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> parent, View view,
                        int position, long id) {
                    // TODO Auto-generated method stub

                }
            });
        }

        @Override
        public void widgetClick(View v) {
            Intent intent = null; 

            switch(v.getId()){
            case R.id.tv_search:
                intent = new Intent(HomeActivity.this,SearchActivity.class);
                startActivity(intent);
                break;
            case R.id.tv_contact:
                intent = new Intent(HomeActivity.this,MeActivity.class);
                startActivity(intent);
                break;
            case R.id.iv_dia:
                intent = new Intent(HomeActivity.this,DiacodeActivity.class);
                startActivity(intent);
                break;
            }
        }
    }

好了，做到这里，我们的首页就算是完成了，我们来看一下我们的效果截图吧！

这里写图片描述

文章标签：
Android开发
数据格式
XML
容器
关键词：
Android首页
陈洪波
目录
相关文章
一笑轮回~
|
4月前
|
Android开发
Android仿高德首页三段式滑动
Android仿高德首页三段式滑动
一笑轮回~
140 0
热烈的马
|
6月前
|
XML Android开发 数据格式
Android Studio App开发实战项目之实现淘宝电商App首页界面（附源码，可用于大作业参考）
Android Studio App开发实战项目之实现淘宝电商App首页界面（附源码，可用于大作业参考）
热烈的马
807 1
Zhujiang
|
IDE 程序员 开发工具
玩安卓从 0 到 1 之首页框架搭建
玩安卓从 0 到 1 之首页框架搭建
Zhujiang
340 0
玩安卓从 0 到 1 之首页框架搭建
Zhujiang
|
缓存 数据库 Android开发
玩安卓从 0 到 1 之项目首页
玩安卓从 0 到 1 之项目首页
Zhujiang
455 0
玩安卓从 0 到 1 之项目首页
程序猿追
|
XML Java Android开发
Android 实战之模拟微信首页界面 (java实现)
Android 实战之模拟微信首页界面 (java实现)
程序猿追
609 0
Android 实战之模拟微信首页界面 (java实现)
PromiseSun
|
Android开发
Android中 如何在本Activity页面退出后回到首页或者指定的Activity入口
Android中 如何在本Activity页面退出后回到首页或者指定的Activity入口
PromiseSun
1495 0
嗯哼9925
|
Apache Android开发
【Android 我的博客APP】1.抓取博客首页文章列表内容——网页数据抓取
嗯哼9925
1379 0
赵彦军521
|
Android开发
Android 首页图片轮播
1、网络上的的一个框架，已经在github 上开源       github  ：  https://github.com/gcgongchao/flashview      相关博客 ： http://www.
赵彦军521
924 0
异步社区
|
Android开发
《Android平板电脑开发秘籍》——3.5节技巧：点击应用程序图标后跳转至应用程序首页
异步社区
1710 0
code_xzh
|
Android开发
Android 仿百合网超火爆社交app首页滑动效果
探探，百合网等神器的首页有一个相册加载个控件，通过左滑右滑加载新的照片，同时左滑丢弃这个照片，右滑则表明对这个照片感兴趣。 这个效果是怎么实现的呢？ 1，Android3.0以后控件中增加了setTranslationX，setTranslationY方法，用于控件沿X,Y轴移动。其原点是相对于控件开始移动的位置，注意，这点很重要。setRotation用于设置控件旋转角度，直接将角度值填入参
code_xzh
1772 0