先給大家上個圖(不知道爲什麼錄製的第一個目錄老是花的,不管了,大家能動意思就行)。
大家應該經常加過這種效果吧,下面我們就開始實現效果。
其實用的東西我們都是知道的,就是listview,那麼listview怎麼實現這個效果呢,主要在於適配器寫好了即可。
先給出主佈局代碼:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ListView
android:id="@+id/list1"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:divider="@null"
android:scrollbars="none" />
<ListView
android:id="@+id/list2"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:divider="@null"
android:scrollbars="none" />
<ListView
android:id="@+id/list3"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_weight="1"
android:divider="@null"
android:scrollbars="none" />
</LinearLayout>
<Button
android:id="@+id/getdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="獲取數據"/>
<TextView
android:id="@+id/showstate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="數據展示臺"
android:layout_margin="10dp"/>
</LinearLayout>
很簡單,三個listview,一個button和一個textview,然後再給出listview的item佈局,我三個listview用的都是用一個item佈局,下面看好:
<?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">
<TextView
android:id="@+id/list_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#ffffff"
android:gravity="center"
android:textColor="#737373"
android:text="層級目錄"/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#bcbcbc"/>
</LinearLayout>
簡單明瞭,然後給出MainActivity的代碼。
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import butterknife.Bind;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {
//下面控件的id用butterknife插件獲取到的,不知道的同學去搜一下,我這裏是在gradle裏面配置了一下
@Bind(R.id.list1)
ListView list1;
@Bind(R.id.list2)
ListView list2;
@Bind(R.id.list3)
ListView list3;
@Bind(R.id.getdate)
Button getdate;
@Bind(R.id.showstate)
TextView showstate;
//裝數據的三個listview
private List<String> lists1;
private List<String> lists2;
private List<String> lists3;
//定義了三個適配器,因爲下面數據的刷新靠這個
private CommonAdaper commonadapter1;
private CommonAdaper commonadapter2;
private CommonAdaper commonadapter3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initData();
initAdapter();
initEvent();
}
private void initData() {
lists1 = new ArrayList<>();
lists2 = new ArrayList<>();
lists3 = new ArrayList<>();
//一個listview裝着一個list,前面的決定後面的變化,具體控制方式在onItemClick方法中
for (int i = 1; i < 31; i++) {
lists1.add("一級聯動目錄" + i);
}
for (int i = 1; i < 31; i++) {
lists2.add("二級聯動目錄" + i);
}
for (int i = 1; i < 31; i++) {
lists3.add("三級聯動目錄" + i);
}
}
private void initAdapter() {
commonadapter1 = new CommonAdaper(MainActivity.this, lists1, 1);
list1.setAdapter(commonadapter1);
commonadapter2 = new CommonAdaper(MainActivity.this, lists2, 2);
list2.setAdapter(commonadapter2);
commonadapter3 = new CommonAdaper(MainActivity.this, lists3, 3);
list3.setAdapter(commonadapter3);
}
private void initEvent() {
list1.setOnItemClickListener(this);
list2.setOnItemClickListener(this);
list3.setOnItemClickListener(this);
getdate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showstate.setText(commonadapter1.getCurentItemnumber() + commonadapter2.getCurentItemnumber() + commonadapter3.getCurentItemnumber());
}
});
}
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
switch (parent.getId()) {
case R.id.list1:
commonadapter1.changeSelected(position);//當點擊listview的時候,刷新當前的listview,就會導致被點擊的item和其他item呈現不用字體顏色和背景
commonadapter2.changeSelected(0);//同上
commonadapter3.changeSelected(0);//同上
// 注意這前三行代碼和後面這兩個代碼位置不能調換,否則會出現雖然定位成功,但會導致listview不能滾動到頂部
list2.setSelection(0); //是listview定位到第一條數據,也就是頂部
list3.setSelection(0);
break;
case R.id.list2:
commonadapter2.changeSelected(position);//刷新
commonadapter3.changeSelected(0);//刷新
//這裏同上
list3.setSelection(0);
break;
case R.id.list3:
commonadapter3.changeSelected(position);//刷新
break;
}
}
}
做了基本的listview數據添加的處理,然後主要的代碼處理都放在onItemClick這個方法裏面,那麼我們就要看適配器裏面是怎麼寫的了,三個listview用的也是同一個適配器,給出:
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import java.util.List;
import android.widget.TextView;
/**
* create 2017-06-30
*/
public class CommonAdaper extends BaseAdapter {
private Context context;
private List<String> list;
private int mSelect = 0; //選中項
private int sign; //作爲一個標記,每個listview傳入的sign不一樣,下面處理的結果也不一樣
private String currentcontent = null; //當前item的內容
public CommonAdaper(Context context, List<String> list, int sign) {
this.context = context;
this.list = list;
this.sign = sign;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder = null;
if (convertView == null) {
viewHolder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.list_item, null);
viewHolder.title = (TextView) convertView.findViewById(R.id.list_item_title);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
currentcontent = list.get(mSelect); //獲取當前item的值,注意,是被選中的那個數據,所以必須用mSelect
viewHolder.title.setText(list.get(position));
//這裏做判斷,對不同的listview做的處理不一樣
switch (sign) {
case 1:
if (mSelect == position) {
viewHolder.title.setTextColor(Color.argb(255, 77, 179, 123));
viewHolder.title.setBackgroundColor(Color.argb(255, 230, 230, 230)); //選中項背景
} else {
viewHolder.title.setTextColor(Color.argb(255, 115, 115, 115));
viewHolder.title.setBackgroundColor(Color.WHITE); //其他項背景
}
break;
case 2:
if (mSelect == position) {
viewHolder.title.setTextColor(Color.argb(255, 77, 179, 123));
viewHolder.title.setBackgroundColor(Color.argb(255, 210, 210, 210)); //選中項背景
} else {
viewHolder.title.setTextColor(Color.argb(255, 100, 100, 100));
viewHolder.title.setBackgroundColor(Color.argb(255, 230, 230, 230)); //其他項背景
}
break;
case 3:
if (mSelect == position) {
viewHolder.title.setTextColor(Color.argb(255, 75, 179, 123));
viewHolder.title.setBackgroundColor(Color.argb(255, 190, 190, 190)); //選中項背景
} else {
viewHolder.title.setTextColor(Color.argb(255, 85, 85, 85));
viewHolder.title.setBackgroundColor(Color.argb(255, 210, 210, 210)); //其他項背景
}
break;
}
return convertView;
}
//簡單的充當viewholder的角色
private class ViewHolder {
public TextView title;
}
//獲取當前被選中的item中的內容
public String getCurentItemnumber()
{
return currentcontent;
}
public void changeSelected(int positon) { //刷新頁面
if (positon != mSelect) {
mSelect = positon;
notifyDataSetChanged();
}
}
}
相對於別人的適配器,我這個唯一不一樣的就是添加了一個sign的標記,作用就是可以根據不同的listview對數據做不同的處理,這樣點擊就會有不同的效果,其他的註釋比較詳細,自己可以看懂。
需要源碼的請訪問:http://download.csdn.net/download/wanxuedong/9913870