The project has a control that imitates the floor switching on the map, though not very familiar with it. But Baidu still has some good examples. I haven't written a blog for a long time, so I encapsulated this control and put it in it. My GitHub.

Controls can achieve the following functions:

1. Set the number of entries displayed by ListView.
2. Set the ListView data and selected entries.
3. Get a click-back for the entry.

Don't talk too much nonsense. First come to an effect map.

Principle:

This control consists of two pictures and a ListView, which can be implemented by adding them to a linear layout.

It's so simple, just add it in with XML directly, so why bother? Well, there's no way. The project should be packaged in JAR package. The resource files are very sensitive.

Custom View is to inherit View or its subclasses and override the method. I've heard it countless times, so I won't go into it.

1. When initializing, set the alignment direction of the sub-view and align the direction.

    private void init(Context context) {
        //Setting the row direction of DecorativeListView subview
        setOrientation(VERTICAL);
        //Center alignment
        setGravity(Gravity.CENTER);
        mItemWidth = 100;
        mItemHeight = 100;
        mFontSize = 18.0F;
        mMaxItemSize = 5;
        mListView = new ListView(context);
        upImage = new ImageView(context);
        downImage = new ImageView(context);
        ......
     }

2. In the method of setting data, the parameters of each view are set and added to the container.

public void setListViewData(String[] data ,int selectID){
        if(data == null){
            return ;
        }
        this.data = data;
        LayoutParams upImageParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        LayoutParams downImageParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

        if(data.length > mMaxItemSize){
            listViewHeight = mMaxItemSize * mItemHeight ;
        }else {
            listViewHeight = data.length * mItemHeight ;
        }
        LayoutParams listViewParams = new LayoutParams(mItemWidth,listViewHeight);
        addView(upImage,upImageParams);
        addView(mListView,listViewParams);
        addView(downImage,downImageParams);
        myAdapter = new MyAdapter();
        mListView.setAdapter(myAdapter);
        mListView.setSelection(selectID);
        currentSelectPosition = selectID ;

    }

3. Call of custom interface.

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        currentSelectPosition = position;
        decorativeListViewItemClickListener.DecorativeListViewItemClick(view,position);
        myAdapter.notifyDataSetChanged();
    }

4. And when ListView slides, the picture state changes.

int firstVisiblePosition = mListView.getFirstVisiblePosition();
        int lastVisiblePosition = mListView.getLastVisiblePosition();
        //When listView's head and tail item s are displayed, the knowledge picture becomes white
        if(firstVisiblePosition == 0){
            if(upNormalDrawable != null&& upNormalDrawable != upImage.getDrawable()){
                upImage.setImageDrawable(upNormalDrawable);//white
            }
        }else if(upDrawable != null&& upDrawable != upImage.getDrawable()){
            upImage.setImageDrawable(upDrawable);//blue
        }
        if(data == null){
            return;
        }
        if(lastVisiblePosition == data.length-1){
            if(downNoramlDrawable != null && downNoramlDrawable != downImage.getDrawable()){
                downImage.setImageDrawable(downNoramlDrawable);//white
            }
        }else if(downDrawable != null && downDrawable != downImage.getDrawable()){
            downImage.setImageDrawable(downDrawable); //blue
        }

Finish!

Integrated libary:

1. Add:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

2. Adding dependency:

dependencies {
        compile 'com.github.GoldenStrawberry:DecorativeListView:V1.0'
}

3. Call Decorative ListView or new in xml.

Example:

xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#888"
    android:gravity="center"
    tools:context="com.joysuch.mylistview.MainActivity">
    <com.joysuch.listviewstyle.DecorativeListView
        android:id="@+id/dlistview"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

Code:

    private DecorativeListView decorativeListView;
    private String data[] ={"F1","F2","F3","F4","F5","F6","F7","F8","F9"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        decorativeListView = (DecorativeListView) findViewById(R.id.dlistview);
        decorativeListView.setListViewItem(5);
        decorativeListView.setListViewData(data,6);
        decorativeListView.setOnDecorativeListViewItemClickListener(this);
    }

    @Override
    public void DecorativeListViewItemClick(View view, int position) {
        Toast.makeText(this,"Click."+data[position],Toast.LENGTH_SHORT).show();
    }

Finally, if you like, welcome STAR!