ListView component development, imitating ios system settings page

I. Introduction

Developed using android's ListView component, similar to the "System Settings" page of Apple's mobile phone, the ListView sub-items contain icons, text descriptions, and the sub-item grouping has the effect of highlighting. The following will show the effect and the development process.

Second, the effect map

3. Development steps & source code

3.1. Add ListView control

First create a new ListView project, and let Android Studio automatically create the activity for us, and then modify the code of activity_main.xml, as shown below.

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

    <LinearLayout android:id="@+id/line1"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:background="@android:color/white">

        <!--并不能够通过添加两个ListView，来达到在一个activity中放置两个ListView的预期效果，
            会导致丧失ListView原有的滚动效果，因为两个ListView相互独立，只有一个ListView会滚动
            而不是两个作为整体滚动。 -->
        <ListView
            android:id="@+id/system_setting_list_view_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

</RelativeLayout>

The outer layer is a RelativeLayout, and the background color RGB is set to #E5E5E5. The RGB value of the background color is placed in the resource file "app/res/values/colors.xml".

The memory is a linear layout LinearLayout, and the background color is set to white, and the highlight is achieved by setting the background color.

It is worth noting that in the linear layout of the inner layer, use the android:layout_alignParentTop attribute to make the inner layer layout top; use the android:layout_marginTop=”20dp” attribute to separate the inner linear layout and the title by 20dp.

3.2, define the entity class

Define an entity class SystemSettingItem as the adaptation type of the ListView adapter.

public class SystemSettingItem {
    private String SystemSettingName;
    private int ImageId;
    // ... 省略了构造函数，以及get,set方法
}

SystemSettingName: The name of the system setting item, similar to "Airplane Mode".
ImageId: The id of the system setting item icon, the icon resource file is placed in the /app/res/drawable-hdpi directory

The point here is to note that the file name we give to the png image is not a number, why is ImageId an int type of data. This is because the way we refer to the png image is imageView.setImageResource(R.drawable.flight_mode); "R.drawable.flight_mode", which is an integer data automatically generated for us by the system.

3.3, ListView child item layout

Specify a custom layout for the ListView sub-item, and create a new system_setting_item.xml in the app/res/layout directory.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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_id"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:layout_margin="10dp"/>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/image_id"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"/>

    <ImageView android:id="@+id/enter_id"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentRight="true"
        android:layout_margin="10dp"/>

</RelativeLayout>

The reason why the relative layout is adopted here is to achieve the effect that the "enter icon" can be displayed on the far right. Compared with the linear layout, the relative layout is easier to achieve.

ImageView - android:layout_alignParentLeft=”true” : Make the icon view the leftmost of the ListView children.

TextView - android:layout_toRightOf=”@id/image_id” : make the text to the right of the icon

Image-View : android:layout_alignParentRight="true" : Make the "enter" icon at the far right of the ListView space child.

3.4, custom adapter

Next, create a custom adapter SystemSettingAdapter, which inherits from ArrayAdapter and specifies the generic type as SystemSettingItem.

package com.dmw.adapter;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.dmw.activity.R;
import com.dmw.domain.SystemSettingItem;

import java.util.List;

public class SystemSettingAdapter extends ArrayAdapter<SystemSettingItem> {

    private int resourceId;
    private Context context;

    /**
     * 
     * @param context  :MainActivity.this 活动的上下文
     * @param resource :R.layout.system_setting_item 自定义的ListView子项
     * @param objects  :ssiList 自定义的实体类数组
     */
    public SystemSettingAdapter(@NonNull Context context, int resource, @NonNull List<SystemSettingItem> objects) {
        super(context, resource, objects);
        resourceId = resource;
        this.context = context;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        // 获得当前项的实例,position为子项Item在ListView空间中的顺序编号
        SystemSettingItem ssi = getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourceId,parent,false);

        // 模拟分割，将ListView中的一项item设置背景颜色为gray
        if(ssi.getSystemSettingName().equals("line")){
            // 获取自定义资源文件中的颜色值(int)
            view.setBackgroundColor(context.getResources().getColor(R.color.colorGray));
            return view;
        }

        // 设置列表项内容
        ImageView imageView = (ImageView)view.findViewById(R.id.image_id);
        imageView.setImageResource(ssi.getImageId());

        TextView textView = (TextView)view.findViewById(R.id.name);
        textView.setText(ssi.getSystemSettingName());

        ImageView enterView = (ImageView)view.findViewById(R.id.enter_id);
        enterView.setImageResource(R.drawable.enter);

        return view;
    }
}

In order to realize the grouping of ListView control sub-items, the method of adding two independent ListView controls to an Activity activity page has been adopted. However, since the two controls are independent of each other, the effect displayed during the page sliding process is not the overall sliding effect. , another embarrassing.

So what is used here is to set a sub-item named "line" in a ListView, and set its background color to the background color of the layout, without adding icons and text, and not adding click events, only used as a dividing line.

3.5, MainActivity

package com.dmw.activity;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import com.dmw.adapter.SystemSettingAdapter;
import com.dmw.domain.SystemSettingItem;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<SystemSettingItem> ssiList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 只是为了展示滚动效果，所以让数量*2
        for(int i = 0;i < 2;i++)
            initSsiList();

        // 借助适配器将数据传递给ListView
        SystemSettingAdapter adapter = new SystemSettingAdapter(MainActivity.this, R.layout.system_setting_item, ssiList);

        ListView listView = findViewById(R.id.system_setting_list_view_1);
        listView.setAdapter(adapter);

        // 设置ListView中子项item的点击事件
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                SystemSettingItem ssi = ssiList.get(position);
                if(!ssi.getSystemSettingName().equals("line"))
                    Toast.makeText(MainActivity.this, ssi.getSystemSettingName(), Toast.LENGTH_SHORT).show();
            }
        });

    }

    /**
     * ListView子项item数据初始化
     */
    private void initSsiList(){
        SystemSettingItem flightMode = new SystemSettingItem("飞行模式", R.drawable.flight_mode);
        ssiList.add(flightMode);

        SystemSettingItem wlan = new SystemSettingItem("无线局域网", R.drawable.wlan);
        ssiList.add(wlan);

        SystemSettingItem blueTooth = new SystemSettingItem("蓝牙", R.drawable.blue_tooth);
        ssiList.add(blueTooth);

        SystemSettingItem cellular = new SystemSettingItem("蜂窝移动网络", R.drawable.cellular);
        ssiList.add(cellular);

        SystemSettingItem hotspot = new SystemSettingItem("个人热点", R.drawable.hotspot);
        ssiList.add(hotspot);

        SystemSettingItem operator = new SystemSettingItem("运营商", R.drawable.operator);
        ssiList.add(operator);

        ssiList.add(new SystemSettingItem("line", 0));

        SystemSettingItem inform = new SystemSettingItem("通知", R.drawable.inform);
        ssiList.add(inform);

        SystemSettingItem console = new SystemSettingItem("控制中心", R.drawable.console);
        ssiList.add(console);

        SystemSettingItem moon = new SystemSettingItem("勿扰模式", R.drawable.moon);
        ssiList.add(moon);

        ssiList.add(new SystemSettingItem("line", 0));

    }
}