• android 开发 实现一个ListView套嵌GirdView的滚动布局


    效果图

    实现思维

    1. 首先要处理管理好需要导入的数据,我们这里创建class来处理这些数据并且便于管理它们。
    2. 创建一个主activity的布局,里面需要一个ListView控件。
    3. 创建一个class继承GirdView,并且重写它。我们需要取消GirdView布局的滚动,让它显示全部内容
    4. 创建一个GirdView的布局,里面导入我们重写好GirdView控件。
    5. 创建GirdView布局里面小图标的布局。
    6. 创建一个class继承GirdView的适配器,我们需要重写GirdView适配器class
    7. 创建ListView适配器使用的数据集合的单例class。
    8. 创建一个class继承ListView的适配器,我们需要重写ListView适配器class
    9. 在主activity里实例ListView,处理数据,数据导入适配器,ListView设置适配器

    代码部分

    1.首先要处理管理好需要导入的数据,我们这里创建class来处理这些数据并且便于管理它们。

    这里涉及隐私我只贴出部分代码做参考

    package com.example.lenovo.mydemoapp.myMoreOptions;
    
    import com.example.lenovo.mydemoapp.R;
    
    /**
     * Created by lenovo on 2018/5/22.
     */
    
    /*
     更多选项列表的数据存放class
     */
    public class MoreOptionsData {
        //沟通组
        private static final String mPhoneTitlem_Title_Text = "沟通";
        private static final String [] mPhoneTitlem_Content_Text = {"电话","群聊","私聊","倾听","录音","拍照"};
        //得到沟通组数据
        public static int[] getmPhoneTitlemContent_Image() {
            return mPhoneTitlem_Content_Image;
        }
    
        public static String[] getmPhoneTitlemContent_Text() {
            return mPhoneTitlem_Content_Text;
        }
    
        public static String getmPhoneTitlem_Title_Text() {
            return mPhoneTitlem_Title_Text;
        }
    
        //得到运动组数据
        public static int[] getmMovementTitlemContent_Image() {
            return mMovementTitlem_Content_Image;
        }
    
        public static String[] getmMovementTitlemContent_Text() {
            return mMovementTitlem_Content_Text;
        }
    
        public static String getmMovementTitlem_Title_Text() {
            return mMovementTitlem_Title_Text;
        }
    
        //得到设置组数据
        public static int[] getmSettingsTitlemContent_Image() {
            return mSettingsTitlem_Content_Image;
        }
    
        public static String[] getmSettingsTitlemContent_Text() {
            return mSettingsTitlem_Content_Text;
        }
    
        public static String getmSettingsTitlem_Title_Text() {
            return mSettingsTitlem_Title_Text;
        }
    
        //得到其他组数据
        public static int[] getmOtherTitlemContent_Image() {
            return mOtherTitlem_Content_Image;
        }
    
        public static String[] getmOtherTitlemContent_Text() {
            return mOtherTitlem_Content_Text;
        }
    
        public static String getmOtherTitlem_Title_Text() {
            return mOtherTitlem_Title_Text;
        }
        //得到四组数据的数组
        public static String[] getTitle_Text_Attrs(){
            return new String[] {mPhoneTitlem_Title_Text,mMovementTitlem_Title_Text,mSettingsTitlem_Title_Text,mOtherTitlem_Title_Text};
        }
        public static String[][] getContent_Text_Attrs(){
            return new String[][] {mPhoneTitlem_Content_Text,mMovementTitlem_Content_Text,mSettingsTitlem_Content_Text,mOtherTitlem_Content_Text};
        }
        public static int[][] getContent_Image_Attrs(){
            return new int[][] {mPhoneTitlem_Content_Image,mMovementTitlem_Content_Image,mSettingsTitlem_Content_Image,mOtherTitlem_Content_Image};
        }
    }

    2.创建一个主activity的布局,里面需要一个ListView控件。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.lenovo.mydemoapp.MoreOptions"
        >
        <com.example.lenovo.mydemoapp.myLayout.TitleLayout
            app:titleNameText="显示标题"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </com.example.lenovo.mydemoapp.myLayout.TitleLayout>
        <ListView
            android:id="@+id/MoreOptions_ListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="20dp"
            android:dividerHeight="20dp"
            android:divider="@color/colorWhite">
        </ListView>
    
    </LinearLayout>

    3.创建一个class继承GirdView,并且重写它。我们需要取消GirdView布局的滚动,让它显示全部内容

    package com.example.lenovo.mydemoapp.myMoreOptions;
    
    import android.content.Context;
    import android.util.AttributeSet;
    import android.widget.GridView;
    
    /**
     * Created by lenovo on 2018/5/23.
     */
    
    public class NoScrollGridView extends GridView {
        public NoScrollGridView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public NoScrollGridView(Context context) {
            super(context);
        }
    
        public NoScrollGridView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    
    
        public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            //核心在此
            int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 3,
                    MeasureSpec.AT_MOST);
            super.onMeasure(widthMeasureSpec, expandSpec);
        }
    }


    4.创建一个GirdView的布局,里面导入我们重写好GirdView控件。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/input_box_background">
        <TextView
            android:id="@+id/MoreOptions_GridView_TitleName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标题名称"
            android:textSize="@dimen/BigTextSize"
            android:textColor="@color/colorBlue"/>
        <com.example.lenovo.mydemoapp.myMoreOptions.NoScrollGridView
            android:id="@+id/MoreOptions_GridView"
            android:numColumns="3"
            android:stretchMode="columnWidth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:horizontalSpacing="20dp"
            android:verticalSpacing="20dp"
            android:layout_marginTop="20dp">
        </com.example.lenovo.mydemoapp.myMoreOptions.NoScrollGridView>
    
    </LinearLayout>

    5.创建GirdView布局里面小图标的布局。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">
        <ImageView
            android:id="@+id/more_options_grid_view_subclass_ImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_funciton_shutdown"/>
        <TextView
            android:id="@+id/more_options_grid_view_subclass_TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="图标名称"
            android:textColor="@color/colorBlue"
            android:textSize="@dimen/BigTextSize"
            android:layout_marginTop="15dp"/>
    
    </LinearLayout>

    6.创建一个class继承GirdView的适配器,我们需要重写GirdView适配器class

    package com.example.lenovo.mydemoapp.myMoreOptions;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import com.example.lenovo.mydemoapp.R;
    import com.example.lenovo.mydemoapp.myDeviceList.DeivceListAdapter;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Created by lenovo on 2018/5/22.
     */
    /*
    GridView的适配器class
     */
    public class MoreOptionsGridViewAdapter extends BaseAdapter {
        //创建一个数据集合,将传入的数组转化成List集合
        private List<DataList> mdataLists = new ArrayList<DataList>();
        //将传入的Context设置为全局变量
        private Context mContext;
        public MoreOptionsGridViewAdapter(Context context){
            super();
            this.mContext = context;
        }
        @Override
        public int getCount() {
            return mdataLists.size();
        }
    
        @Override
        public Object getItem(int position) {
            return mdataLists.get(position);
        }
    
        @Override
        public long getItemId(int position) {
            return position;
        }
        /*
        自写一个数据导入的方法,在方法将在ListView的适配器class里调用,
        因为我们将GridView适配器数据导入放到了ListView适配器class中
         */
        public void setmList(String[] name,int[] image){
            for (int i=0;i<name.length;i++){
                //实例化一个单例内部class导入数据
                DataList dataList = new DataList(name[i],image[i]);
                //添加到集合中
                mdataLists.add(dataList);
            }
        }
    
        /*
        重写getView方法,获得控件单例,添加单例数据,缓存单例
         */
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            //用于缓存的控件的class,目的是不让一个控件的获取需要反复使用findViewById,可以优化滚动布局速度
            MoreOptionsViewHolder moreOptionsViewHolder;
            //如果当前的一个的View是空的,那就重新findViewById获取它。
            if (convertView == null){
                convertView = LayoutInflater.from(mContext).inflate(R.layout.more_options_grid_view_subclass,null);
                moreOptionsViewHolder = new MoreOptionsViewHolder();
                moreOptionsViewHolder.name = (TextView)convertView.findViewById(R.id.more_options_grid_view_subclass_TextView);
                moreOptionsViewHolder.image = (ImageView)convertView.findViewById(R.id.more_options_grid_view_subclass_ImageView);
                convertView.setTag(moreOptionsViewHolder);
            }else { //如果有这个View,那就继续使用已经找到的子类控件实例
                moreOptionsViewHolder = (MoreOptionsViewHolder)convertView.getTag();
            }
            //根据当前位置获取List数据集合中的单例
            DataList dataList = mdataLists.get(position);
            //配置控件单例对应的List单例数据
            moreOptionsViewHolder.image.setImageResource(dataList.getImage());
            moreOptionsViewHolder.name.setText(dataList.getName());
            return convertView;
        }
        /*
        写一个数据存放的单例内部class
         */
        class DataList{
            private String name;
            private int image;
            public DataList(String name,int image){
                this.name = name;
                this.image = image;
            }
            public int getImage() {
                return image;
            }
    
            public String getName() {
                return name;
            }
        }
        /*
        控件缓存
         */
        class MoreOptionsViewHolder {
            public TextView name;
            public ImageView image;
        }
    }

    7.创建ListView适配器使用的数据集合的单例class。

    package com.example.lenovo.mydemoapp.myMoreOptions;
    
    import android.widget.GridView;
    
    /**
     * Created by lenovo on 2018/5/23.
     */
    
    public class MoreOptionsDataLineViewData {
        private GridView gridView;
        private String TitleName ;
        public MoreOptionsDataLineViewData(String titleName,GridView gridView){
            this.TitleName = titleName;
            this.gridView = gridView;
        }
        public String getTitleName() {
            return TitleName;
        }
    
        public GridView getGridView() {
            return gridView;
        }
    }

    8.创建一个class继承ListView的适配器,我们需要重写ListView适配器class

    package com.example.lenovo.mydemoapp.myMoreOptions;
    
    import android.content.Context;
    import android.support.annotation.LayoutRes;
    import android.support.annotation.NonNull;
    import android.support.annotation.Nullable;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.BaseAdapter;
    import android.widget.GridView;
    import android.widget.TextView;
    
    import com.example.lenovo.mydemoapp.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Created by lenovo on 2018/5/23.
     */
    /*
    ListView的适配器类
     */
    public class MoreOptionsListViewAdapter extends ArrayAdapter<MoreOptionsDataLineViewData>{
        List<MoreOptionsDataLineViewData> mlineViewDatas;
        //布局ID
        int resourceId;
        public MoreOptionsListViewAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List<MoreOptionsDataLineViewData> objects) {
            super(context, resource, objects);
            resourceId = resource;
        }
    
        @NonNull
        @Override
        public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
            MoreOptionsDataLineViewData moreOptionsDataLineViewData = getItem(position);
            View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);
            TextView textView = (TextView)view.findViewById(R.id.MoreOptions_GridView_TitleName);
            GridView gridView = (GridView)view.findViewById(R.id.MoreOptions_GridView);
            //导入标题栏数据
            textView.setText(moreOptionsDataLineViewData.getTitleName());
            //实例化一个GridView的适配器class
            MoreOptionsGridViewAdapter moreOptionsGridViewAdapter = new MoreOptionsGridViewAdapter(view.getContext());
            //添加适配器的数据
            moreOptionsGridViewAdapter.setmList(new MoreOptionsData().getContent_Text_Attrs()[position]
                    ,new MoreOptionsData().getContent_Image_Attrs()[position]);
            //将gridView设置适配器
            gridView.setAdapter(moreOptionsGridViewAdapter);
            return view;
        }
    }

    9.在主activity里实例ListView,处理数据,数据导入适配器,ListView设置适配器

    package com.example.lenovo.mydemoapp;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.GridView;
    import android.widget.ListView;
    
    import com.example.lenovo.mydemoapp.myMoreOptions.MoreOptionsData;
    import com.example.lenovo.mydemoapp.myMoreOptions.MoreOptionsDataLineViewData;
    import com.example.lenovo.mydemoapp.myMoreOptions.MoreOptionsGridViewAdapter;
    import com.example.lenovo.mydemoapp.myMoreOptions.MoreOptionsListViewAdapter;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class MoreOptions extends AppCompatActivity {
        //实例数据class
        private MoreOptionsData mMoreOptionsData = new MoreOptionsData();
        //创建listView使用的数据集合
        private List<MoreOptionsDataLineViewData>  lineViewDatas = new ArrayList<>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_more_options);
            ListView listView = (ListView)findViewById(R.id.MoreOptions_ListView);
            //根据标题名称数组长度创建GridView的数量
            for (int i=0;i<mMoreOptionsData.getTitle_Text_Attrs().length;i++){
                //创建GridView的实例,注意这里的GridView我们并没有设置适配器,而是直接添加到List数据集合中,一起传入ListView的适配器Class里面。
                //我们将在ListView的适配器class里面,在给GridView的单例设置GridView的适配器class
                GridView gridView = (GridView)findViewById(R.id.MoreOptions_GridView);
                //给集合的单例添加数据: 数据为一个标题名称,一个GridView实例
                MoreOptionsDataLineViewData lineViewData = new MoreOptionsDataLineViewData(mMoreOptionsData.getTitle_Text_Attrs()[i],gridView);
                ///将单例数据导入listView使用的数据集合中
                lineViewDatas.add(lineViewData);
            }
            //给ListView的适配器导入数据
            MoreOptionsListViewAdapter moreOptionsListViewAdapter = new MoreOptionsListViewAdapter(MoreOptions.this,R.layout.more_options_grid_view,lineViewDatas);
            //给ListView设置适配器
            listView.setAdapter(moreOptionsListViewAdapter);
        }
    }
     
  • 相关阅读:
    关于 HSSF 和 XSSF 功能的开发者入门指南 (Apache POI 操作 Excel)
    在Windows上安装MySQL(免安装ZIP版)
    Linux下解决中文乱码问题
    VMware安装VMware Tools
    (RHEL)Linux下的oracle(11g R2)安装过程
    每天学一点Python
    简单的Datatable转List,Json
    C# 刷票程序
    一些顿悟,和新的开始!
    每天学一点Python(2)
  • 原文地址:https://www.cnblogs.com/guanxinjing/p/9708612.html
Copyright © 2020-2023  润新知