android开发列表界面

android开发列表界面,上边是一个显示题目,下边显示的是图标,中间显示的是列表。

看一下效果吧

当鼠标点击上之后出现背景图,下面看一下如何做出这样的效果吧。

1.创建android工程

修改main.xml中的内容如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout android:layout_height="28px"
        android:layout_width="fill_parent" android:orientation="horizontal"
        android:gravity="center_vertical" android:paddingLeft="5px"
        android:background="@drawable/top_bg">
        <ImageView android:layout_width="25px"
            android:layout_height="18px" android:src="@drawable/manage"></ImageView>
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textColor="#000"
            android:textSize="14px" android:text="Account"></TextView>
    </LinearLayout>

    <!-- 中间的列表 -->
    <GridView android:id="@+id/gv_apps" android:layout_height="fill_parent"
        android:layout_width="fill_parent" android:numColumns="3"
        android:horizontalSpacing="20px" android:verticalSpacing="20px"
        android:listSelector="@drawable/choose_gridview"
        android:layout_marginTop="28px" android:layout_marginBottom="50px"
        android:layout_marginLeft="5px" android:layout_marginRight="5px"></GridView>

    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="34px" android:layout_alignParentBottom="true"
        android:background="@drawable/bottom_bg">
        <ImageButton android:id="@+id/ib_change_view"
            android:layout_alignParentLeft="true" android:layout_marginLeft="5px"
            android:layout_marginTop="1px" android:background="@drawable/button1"
            android:layout_width="32px" android:layout_height="32px"></ImageButton>
        <ImageButton android:id="@+id/ib_change_view"
            android:layout_alignParentLeft="true" android:layout_marginLeft="50px"
            android:layout_marginTop="1px" android:background="@drawable/button2"
            android:layout_width="32px" android:layout_height="32px"></ImageButton>
        <ImageButton android:id="@+id/ib_change_view"
            android:layout_alignParentLeft="true" android:layout_marginLeft="100px"
            android:layout_marginTop="1px" android:background="@drawable/button3"
            android:layout_width="32px" android:layout_height="32px"></ImageButton>
        <ImageButton android:id="@+id/ib_change_category"
            android:layout_alignParentLeft="true" android:layout_marginLeft="150px"
            android:layout_marginTop="1px" android:background="@drawable/button4"
            android:layout_width="32px" android:layout_height="32px"></ImageButton>
    </RelativeLayout>

</RelativeLayout>

在这里边用了两个布局

RelativeLayout:children是相互之间相关位置或者和他们的parent位置相关,常用在form中

LinearLayout:children排列成一行多列或者一列多行的形式,这种layout最常见

GridView 显示的是网格的布局,一般可以加入各种adapter,这是适配器的典型实现。android中面向对象做的真的不错。。。

2.添加GridViewAdapter.java类

输入内容如下:

public class GridViewAdapter extends BaseAdapter{
    //存放各个元素
    private List<ViewItem> listItem = new ArrayList<ViewItem>();
    
    // 将一个xml文件转化成视图
    LayoutInflater inFlater;
    
    public GridViewAdapter(Context context){
        this.inFlater = LayoutInflater.from(context);
        init();
    }
    
    private void init(){
        //先在这里初始化,以后放到数据库里
        ViewItem vi1 = new ViewItem();
        vi1.setName("记录账目");
        vi1.setImgName(R.drawable.img1);
        ViewItem vi2 = new ViewItem();
        vi2.setName("记录账目");
        vi2.setImgName(R.drawable.img2);
        ViewItem vi3 = new ViewItem();
        vi3.setName("记录账目");
        vi3.setImgName(R.drawable.img3);
        ViewItem vi4 = new ViewItem();
        vi4.setName("记录账目");
        vi4.setImgName(R.drawable.img4);
        ViewItem vi5 = new ViewItem();
        vi5.setName("记录账目");
        vi5.setImgName(R.drawable.img5);
        ViewItem vi6 = new ViewItem();
        vi6.setName("记录账目");
        vi6.setImgName(R.drawable.img6);
        listItem.add(vi1);
        listItem.add(vi2);
        listItem.add(vi3);
        listItem.add(vi4);
        listItem.add(vi5);
        listItem.add(vi6);
    }

    public int getCount() {
        // TODO Auto-generated method stub
        return listItem.size();
    }

    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }

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

    public View getView(int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        View view = inFlater.inflate(R.layout.gv_item, null);
        TextView tv = (TextView) view.findViewById(R.id.gv_item_appname);
        ImageView iv = (ImageView) view.findViewById(R.id.gv_item_icon);
        
        tv.setText(listItem.get(arg0).getName());
        iv.setImageResource(listItem.get(arg0).getImgName());
        
        return view;
    }

}

配置适配器,并且将xml转化成视图处理。

继承BaseAdapter,并且实现里面的方法。

3.修改主布局文件类

public class AccountMain extends Activity {
    /** Called when the activity is first created. */
    private GridView gv;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 去除title
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 全屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        
        setContentView(R.layout.main);

        gv = (GridView) this.findViewById(R.id.gv_apps);

        gv.setAdapter(new GridViewAdapter(AccountMain.this));
    }
}

先是实例化GridView,然后将对应的适配器信息传入,这样就得到了上面的效果!

其中ImageButton的属性android:src如果设置的图片较大则全部显示,解决的办法是要么用android:background,要么干脆换成ImageView。

这只是其中的一个界面的演示,这块的init部分可以再做进一步的处理,可以做动态的配置。

可以将配置信息配置到配置文件中或者将对应信息配置到数据库中,即SqlLite中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发与分享

【Android】数据存储(一) SharedPreferences详解

3857
来自专栏知识分享

android客服端+eps8266+单片机+路由器之远程控制系统

用android客服端+eps8266+单片机+路由器做了一个远程控制的系统,因为自己是在实验室里,所以把实验室的门,灯做成了远程控制的。 控制距离有多远---...

6936
来自专栏james大数据架构

实例演示Android异步加载图片

本文给大家演示异步加载图片的分析过程。让大家了解异步加载图片的好处,以及如何更新UI。 首先给出main.xml布局文件: 简单来说就是 LinearLayou...

2125
来自专栏Android开发经验

事件分发主要过程

1322
来自专栏水击三千

Android学习之sqlite与listview

在android系统中使用的是sqlite数据库,前面的简易登录系统已经讲述了数据库的应用。本例的重点是实现数据库与listview的绑定。demo的数据是将个...

3556
来自专栏7号代码

Android应用界面开发——Fragment(实现图书详情界面)

Fragment代表了Activity的子模块,因此可以把Fragment理解成Activity片段。

3072
来自专栏双十二技术哥

Android fragment 标签加载过程分析

在上一篇文章中我们介绍了 AsyncLayoutInflater 使用的注意事项及改进方案。

1381
来自专栏10km的专栏

jface databinding:使用CheckboxTableViewer实现表中(Set)对象与CheckTable中选中条目数据绑定

上一篇博文《jface databinding:可多选的widget List组件selection项目与java.util.List对象的双向数据绑定》讲述了...

38810
来自专栏三流程序员的挣扎

Navigation 详解二

BottomNavigationView 以更简洁的方式来实现过去的 BottomNavigationBar 的样式。Android Studio 中创建一个 ...

2012
来自专栏刘望舒

RxBinding使用和源码解析

作者 | juexingzhe 地址 | https://www.jianshu.com/u/ea71bb3770b4 声明 | 本文是 juexingzhe...

44110

扫码关注云+社区

领取腾讯云代金券