列表示图和网格示图

Posted 2022-10-20 z啵唧啵唧

列表示图ListView

常用属性

声明一个ListView

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

    <!--
    声明一个ListView
    -->
    <ListView
        android:id="@+id/lv_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

public class ListViewActivity extends Activity 
    /**
     * 声明一个ListView控件
     */
    private ListView mLv1;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        //给当前这个Activity设置它的布局
        setContentView(R.layout.activity_listview);
        mLv1 = findViewById(R.id.lv_1);
        //给ListView设置Adapter
        mLv1.setAdapter(new MyListAdapter(ListViewActivity.this));
    

Adapter接口

编写ListView的Adapter接口

public class MyListAdapter extends BaseAdapter 
    private Context mContext;
    private LayoutInflater mLayoutInflater;

    public MyListAdapter(Context context) 
        this.mContext = context;
        mLayoutInflater = LayoutInflater.from(context);
    

    /**
     * 获取列表的长度
     *
     * @return
     */
    @Override
    public int getCount() 
        return 10;
    

    @Override
    public Object getItem(int position) 
        return null;
    

    @Override
    public long getItemId(int position) 
        return 0;
    

    static class ViewHolder 
        public ImageView imageView;
        public TextView textTitle;
        public TextView textTime;
        public TextView textContent;
    

    /**
     * 获取列表每一行的样式
     *
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
        ViewHolder  holder = null;
        if (convertView == null) 
            convertView = mLayoutInflater.inflate(R.layout.layout_list_item, null);
            holder = new ViewHolder();
            holder.imageView = convertView.findViewById(R.id.iv);
            holder.textTitle = convertView.findViewById(R.id.tv_title);
            holder.textTime = convertView.findViewById(R.id.tv_time);
            holder.textContent = convertView.findViewById(R.id.tv_content);
            convertView.setTag(holder);
         else 
            holder = (ViewHolder) convertView.getTag();
        
        //给控件赋值
        holder.textTitle.setText("这是标题");
        holder.textTime.setText("2088-08-08");
        holder.textContent.setText("这是内容");
        Glide.with(mContext).load("https://www.baidu.com/img/pc_d421b05ca87d7884081659a6e6bdfaaa.png").into(holder.imageView);
        return convertView;
    

编写Adapter对应的xml布局,也就是编写一个列表的样式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingLeft="15dp"
    android:paddingTop="10dp"
    android:paddingRight="15dp"
    android:paddingBottom="10dp">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:background="#000000"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_title"
            android:text="Hello"
            android:textSize="20sp"
            android:textColor="#000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_time"
            android:textColor="#000000"
            android:text="2022-10-05"
            android:textSize="18sp"
            android:layout_marginTop="10dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_content"
            android:textColor="#000000"
            android:textSize="18sp"
            android:text="这是内容"/>
    </LinearLayout>
</LinearLayout>

Demo演示

网格示图GridView

常用属性

声明一个GridView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="15dp">

    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gv"
        android:numColumns="3"
        android:horizontalSpacing="10dp"
        android:verticalSpacing="10dp"/>
</LinearLayout>

public class GridViewActivity extends AppCompatActivity 
    private GridView mGv;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gridview);
        mGv = findViewById(R.id.gv);
        //
        mGv.setAdapter(new MyGridViewAdapter(GridViewActivity.this));
    

Adapter

public class MyGridViewAdapter extends BaseAdapter 
    private Context mContext;
    private LayoutInflater mLayoutInflater;

    public MyGridViewAdapter(Context context) 
        this.mContext = context;
        mLayoutInflater = LayoutInflater.from(context);
    

    @Override
    public int getCount() 
        return 10;
    

    @Override
    public Object getItem(int position) 
        return null;
    

    @Override
    public long getItemId(int position) 
        return 0;
    

    static class ViewHolder 
        //声明一些控件
        public ImageView imageView;
        public TextView textView;
    

    /**
     * 设置每个格子长什么样子
     *
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
        ViewHolder holder = null;
        if (convertView == null) 
            convertView = mLayoutInflater.inflate(R.layout.layout_grid_item, null);
            //实例化holder
            holder = new ViewHolder();
            convertView.setTag(holder);
            holder.imageView = convertView.findViewById(R.id.iv_grid);
            holder.textView = convertView.findViewById(R.id.tv_title);
         else 
            holder = (ViewHolder) convertView.getTag();
        
        //赋值
        //holder.textView.setText("科大");
        Glide.with(mContext).load("https://www.xust.edu.cn/images/logo.png").into(holder.imageView);
        return convertView;
    

编写一个网格对应的样式

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/iv_grid"
        android:scaleType="fitCenter"
        android:background="#000000"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv_title"
        android:text="Hello"
        android:textColor="#FF6644"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:textSize="10sp"/>

</LinearLayout>

Demo演示