自定義城市列表——可摺疊

先前公司有個需求，讓我們做一個城市列表頁，不是常見的側邊快速索引，也不是粘性頭部的滑動模式，而是分組城市可摺疊的模式，自己研究了下，實現這個效果：

接下來說下我的實現思路：目前這個列表主要分爲兩部分——熱門城市和所有城市列表，相當於是兩個不同類型的佈局，我在做的時候使用的是ListView的添加頭部的方式，把熱門城市作爲頭部添加到lListView中，接下來再做城市列表實現。這是一種思路，其實分類型應該也可以實現這個功能，我只分析我這裏實現的思路，分類型大家可以自己去嘗試嘗試。

一、設置滑動列表佈局

      添加ListView控件在你的佈局文件中：

<ListView
        android:id="@+id/public_allcity_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"
        android:divider="@null"
        android:listSelector="@android:color/transparent" />

      將熱門城市作爲ListView的頭部添加到列表中：

  /**
     * 添加listview的頭部——熱門城市
     */
    private void addListHead() {
        LayoutInflater localLayoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
        View hotBlank = localLayoutInflater.inflate(R.layout.location_layout, publicAllcityList, false);
        gvCityLabel = hotBlank.findViewById(R.id.gv_city_label);
        publicAllcityList.addHeaderView(hotBlank);
    }

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingLeft="15dp"
        android:paddingTop="10dp"
        android:text="熱門城市"
        android:textColor="@color/gray_666666"
        android:textSize="14sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_ffffff"
        android:orientation="horizontal"
        android:paddingBottom="28dp"
        android:paddingTop="28dp">

        <GridView
            android:id="@+id/gv_city_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:listSelector="@android:color/transparent"
            android:numColumns="5"
            android:overScrollMode="never"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:scrollbars="none"
            android:verticalSpacing="20dp"></GridView>
    </LinearLayout>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="所有城市"
        android:textColor="@color/gray_666666"
        android:textSize="14sp" />
</LinearLayout>

 

二、設置熱門城市

 

上面已經實現將熱門城市作爲頭部添加到列表中，下來我們只要給熱門添加數據和適配器，就可以實現頭部的效果。

其中：hotData是模擬的熱門城市的數據，cityAdapter是熱門城市的適配器

 /**
     * 熱門城市適配器
     */
    private void setHotAdapter() {
        cityAdapter = new GridAdapter(this, hotData);
        gvCityLabel.setAdapter(cityAdapter);
        ListViewUtils.fixGridViewHeight(gvCityLabel, 5);
        gvCityLabel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                cityAdapter.setPostion(position);
                cityAdapter.notifyDataSetChanged();
            }
        });
    }

在適配器中先加載數據到列表頭部，然後根據position的切換設置樣式的變換效果：

if (position == currentPostion) {//選中的標籤樣式
            city.setBackgroundResource(R.drawable.raduis_stroken_orange_bg);
            city.setTextColor(UIUtils.getColorResource(context, R.color.white_ffffff));
        } else {//未選中的標籤樣式
            city.setBackgroundResource(R.drawable.raduis_stroken_white_bg);
            city.setTextColor(UIUtils.getColorResource(context, R.color.gray_333333));
        }

熱門城市的效果就可以實現了。

三、設置可摺疊城市列表

在這裏我使用一些模擬的城市數據，然後對城市進行排序並且根據首字母情況進行排序，具體的方法我就不列舉了。然後設置適配器，在適配器進行數據的加載以及摺疊的設置，數據加載就是簡單適配器的使用，摺疊設置是根據點擊positon來設置分組城市的顯示和隱藏來進行實現的：

if (shrinks.get(position)) {
                gvCityLabel.setVisibility(View.VISIBLE);
                ivShrinkOrDisplay.setImageResource(R.drawable.destination_shrink);
            } else {
                gvCityLabel.setVisibility(View.GONE);
                ivShrinkOrDisplay.setImageResource(R.drawable.destination_unfold);
            }

在摺疊的按鈕那做一個點擊監聽，可以隨時知道需要摺疊還是展開，對適配器數據進行即時更新

 llShrinkOrUnfolder.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (shrinks.get(position)) {
                        isShrink = false;
                    } else {
                        isShrink = true;
                    }
                    shrinks.set(position, isShrink);
                    setShrinks(shrinks);
                    notifyDataSetChanged();
                }
            });

分組中的城市具體的樣式和熱門城市適配器中設置的樣式是類似的，可以複用熱門城市的適配器來進行具體分組城市每個城市的樣式。

到這裏基本就可以實現以上的功能，當然我們也可以對ListView做一些item點擊效果，具體看個人的需求。還是一樣，有什麼問題希望大家可以積極對我提出來，我會學習改進的哈~

完整的資源文件可參考：可摺疊城市列表項目