Android控件之高级控件——ListView、cardView、屏幕适配-阿里云开发者社区

一：ListView

1.什么是ListView

如下通过一行行列表视图展示数据的一种控件，应用场景比如通讯录、短信列表、聊天联系人、文件夹列表、评论列表、应用列表等

2.Layout中如何实现ListView

第一步：layout中创建ListView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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=".MainActivity">
    <ListView
        android:id="@+id/list_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

效果

第二步：创建每一行的Layout。item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:id="@+id/list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="30dp"
        android:paddingTop="12dp"
        android:text="今天是个好日子"
        android:textSize="24dp" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24dp"
        android:text="阅读原文"
        android:layout_marginLeft="90dp"/>
</LinearLayout>

效果

第三步：使用adapter将数据填充到每一行的视图中

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView listView = findViewById(R.id.list_item);
        List<String> list = new ArrayList<>();
        list.add("Android知识了解");
        list.add("Android开发环境搭建");
        list.add("Android控件学习");
        list.add("Android网络操作");
        listView.setAdapter(new ListAdapter(list));
    }
 
    public class ListAdapter extends BaseAdapter {
        List<String> names;
 
        public ListAdapter(List<String> list) {
            names = list;
        }
 
        @Override
        public int getCount() {//有多少条数据
            return names.size();
        }
 
        @Override
        public Object getItem(int position) {//获取当前postion位置的这条数据
            return names.get(position);
        }
 
        @Override
        public long getItemId(int position) {//获取当前postion位置的id
            return position;
        }
 
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            //xml转成java代码操作
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = layoutInflater.inflate(R.layout.item, null);
            TextView textView = convertView.findViewById(R.id.item_text);
            Button button = convertView.findViewById(R.id.button);
            textView.setText(names.get(position));
            return convertView;
        }
    }
}

效果

3.给ListView添加头部Header

我们要实现的需求如下，当我们向上翻动时候，顶部也会滚动

要实现以上的header效果，主要用到的方法就是ListView的addHeaderView(View view)，需要一个view对象，所以我们创建一个header.xml的layout

<?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:background="@mipmap/header"
        />
</LinearLayout>

效果

java代码，只需在3中代码的onCreate方法加上以下代码

//读取layout转成View
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View header= layoutInflater.inflate(R.layout.header, null);
listView.addHeaderView(header);

注：如果要实现翻滚列表但是顶部图片不随着翻动效果，我们只需将界面设计成顶部一个ImageView控件加上下面一个ListView控件

4.通过ListView展示手机所有应用列表

我们要实现的需求如下所示，展示所有应用列表，并且点击能够进入当前应用

这里每行的layout的xml文件发生了点变化，代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
 
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24dp"
        android:text="阅读原文"
        android:layout_marginLeft="10dp"
       />
    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="30dp"
        android:paddingTop="12dp"
        android:text="今天是个好日子"
        android:textSize="24dp" />
</LinearLayout>

整个java代码如下

 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView listView = findViewById(R.id.list_item);
        final List<ResolveInfo> list = getAppInfos();
        listView.setAdapter(new ListAdapter(list));
        //添加每个item的点击事件
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                String packageName = list.get(position).activityInfo.packageName;
                String className = list.get(position).activityInfo.name;
                ComponentName componentName = new ComponentName(packageName, className);
                final Intent intent = new Intent();
                intent.setComponent(componentName);
                startActivity(intent);
            }
        });
    }
 
 
    public class ListAdapter extends BaseAdapter {
        List<ResolveInfo> names;
 
        public ListAdapter(List<ResolveInfo> list) {
            names = list;
        }
 
        @Override
        public int getCount() {//有多少条数据
            return names.size();
        }
 
        @Override
        public Object getItem(int position) {//获取当前postion位置的这条数据
            return names.get(position);
        }
 
        @Override
        public long getItemId(int position) {//获取当前postion位置的id
            return position;
        }
 
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            //xml转成java代码操作
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = layoutInflater.inflate(R.layout.item, null);
            TextView textView = (TextView) convertView.findViewById(R.id.item_text);
            ImageView imageView = (ImageView) convertView.findViewById(R.id.image);
            textView.setText(names.get(position).activityInfo.loadLabel(getPackageManager()));
            imageView.setImageDrawable(names.get(position).activityInfo.loadIcon(getPackageManager()));
            return convertView;
        }
    }
 
    //获取所有的应用信息
    private List<ResolveInfo> getAppInfos() {
        Intent intent = new Intent(Intent.ACTION_MAIN, null);
        intent.addCategory(Intent.CATEGORY_LAUNCHER);
        return getPackageManager().queryIntentActivities(intent, 0);
    }
}

5.优化ListView

我们上面实现的ListView缺点就是如果数据很多的时候，我们每次翻动都会加载每个item进行渲染，我们可以通过缓存当前这个item达到优化

具体修改的代码如下

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder holder = new ViewHolder();
    if(convertView==null){
        LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = layoutInflater.inflate(R.layout.item, null);
        holder.textView  = (TextView) convertView.findViewById(R.id.item_text);
        holder.imageView  = (ImageView) convertView.findViewById(R.id.image);
        convertView.setTag(holder);
    }else{
        holder = (ViewHolder)convertView.getTag();
    }
    holder.textView.setText(names.get(position).activityInfo.loadLabel(getPackageManager()));
    holder.imageView .setImageDrawable(names.get(position).activityInfo.loadIcon(getPackageManager()));
    return convertView;
}
public  class ViewHolder{
    public TextView textView;
    public ImageView imageView;
}

二：CardView

1.CardView是什么？

CardView是Android5.0之后新增的一个继承自FrameLayout，方便作为其他控件容器添加3D阴影和圆角效果，使用的时候需要独立引入com.android.support:cardview-v7:26.1.0

如下效果

2.CardView常用属性

app:cardBackgroundColor背景色

app:cardCornerRadius圆角半径

app:contentPadding内容padding

app:cardElevation阴影大小

cardUseCompatPadding 默认false，用于5.0以上，true则添加额外的padding绘制阴影

cardPreventCornerOverlap 默认true 用于5.0以下，添加额外padding防止内容和圆角重叠

三：屏幕适配

让我们的app使用不同尺寸、不同分辨率的设备，完成屏幕适配主要包括布局上的适配和图片上的适配

几个概念

屏幕尺寸：是屏幕对角线的长度单位是英寸，1英寸=2.54厘米，常见尺寸2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0

屏幕分辨率：指在横纵向上像素点数，单位是px,1px=1个像素点，一般以纵向像素*横向像素如1960*1080

屏幕像素密度：尺寸不变的情况下，分辨率越高屏幕越清晰屏幕像素密度越高，即屏幕像素密度指的是每英寸上的像素点数单位是dpi（求法就是首先根据三角形求出对角线上的像素，然后除以屏幕尺寸即可），

dp的范围划分

布局适配

1.禁用绝度布局

2.少用px作为单位，改用dp或者dip

3.合理使用wrap_content（先按照内容的多少设定控件大小，再按照权重比例分配）、match_parent（控件大小=父容器大小+权重比例*剩余空间大小）、layout_weight（0dp，直接按照你所设定比例分配）

图片适配

1.提供不容分辨率的图

2.使用自动拉伸图

文章首发地址：www.javayihao.top

文章首发公众号：java一号

Android控件之高级控件——ListView、cardView、屏幕适配

一：ListView

1.什么是ListView

2.Layout中如何实现ListView

3.给ListView添加头部Header

4.通过ListView展示手机所有应用列表

5.优化ListView

二：CardView

1.CardView是什么？

2.CardView常用属性

三：屏幕适配

几个概念

布局适配

图片适配

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Android控件之高级控件——ListView、cardView、屏幕适配

一：ListView

1.什么是ListView

2.Layout中如何实现ListView

3.给ListView添加头部Header

4.通过ListView展示手机所有应用列表

5.优化ListView

二：CardView

1.CardView是什么？

2.CardView常用属性

三：屏幕适配

几个概念

布局适配

图片适配

热门文章

最新文章

相关课程

相关电子书