RecyclerView優(yōu)雅實(shí)現(xiàn)復(fù)雜列表布局
這次學(xué)習(xí)的內(nèi)容是使用RecyclerView來(lái)實(shí)現(xiàn)一些較為復(fù)雜的布局,比如一個(gè)item:
最左邊是一個(gè)imageview,中間部分為textView,textView下面又是一個(gè)textView,最右邊為一個(gè)imageview。
1、首先在activity_main.xml中添加RecyclerView,隨后正如之前所說(shuō)的分別針對(duì)左中右新建3個(gè)XML布局文件命名為item_type_one、two、three.隨后對(duì)其進(jìn)行布局配置。
2、新建一個(gè)adapter添加模擬數(shù)據(jù)。然后針對(duì)布局新建三個(gè)viewholder。隨后新建一個(gè)抽象類(lèi)TypeAbstractViewHolder,將三個(gè)viewholder用到的同一個(gè)方法封裝起來(lái)調(diào)用,將三個(gè)viewHolder繼承自抽象類(lèi)。為了優(yōu)雅。
activity_main.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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.tony.recyclerviewdemo.MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recycleView" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> </RelativeLayout>
item_type_one.xml:
<?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="60dp" xmlns:tools="http://schemas.android.com/tools" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/avatar" android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="20dp" /> <TextView tools:text = "月滿(mǎn)軒尼詩(shī)" android:id="@+id/name" android:layout_marginLeft="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
item_type_two.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="60dp" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/avatar" android:layout_width="40dp" android:layout_height="40dp" android:layout_marginLeft="20dp" /> <LinearLayout android:layout_marginLeft="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="月滿(mǎn)軒尼詩(shī)" /> <TextView android:id="@+id/content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" tools:text="月滿(mǎn)軒尼詩(shī)是一部好電影嗎?" /> </LinearLayout> </LinearLayout>
item_type_three.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="60dp" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="horizontal"> <ImageView android:id="@+id/avatar" android:layout_width="40dp" android:layout_height="40dp" android:layout_centerVertical="true" android:layout_marginLeft="20dp" /> <ImageView android:id="@+id/contentImage" android:layout_width="100dp" android:layout_height="60dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:orientation="vertical" android:layout_centerVertical="true" android:layout_toRightOf="@+id/avatar" android:layout_toEndOf="@+id/avatar" android:layout_marginStart="20dp"> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="月滿(mǎn)軒尼詩(shī)" /> <TextView android:id="@+id/content" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" tools:text="月滿(mǎn)軒尼詩(shī)是一部好電影嗎?" /> </LinearLayout> </RelativeLayout>
這邊提一個(gè)小技巧,一般textview如果不設(shè)置文本內(nèi)容的話(huà)是無(wú)法預(yù)覽的,這里我們?cè)趯傩灾刑砑右粋€(gè):tools:text=”abc”;
這個(gè)時(shí)候abc就會(huì)在UI上面顯示出來(lái)了,而且abc也不用加入string.xml.
Java文件:
MAinActivity.class
package com.example.tony.recyclerviewdemo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private DemoAdapter mAdapter; int colors[] = {android.R.color.holo_blue_light, android.R.color.holo_orange_light, android.R.color.holo_red_light}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mRecyclerView = (RecyclerView) findViewById(R.id.recycleView); mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)); mAdapter = new DemoAdapter(this); mRecyclerView.setAdapter(mAdapter); initData(); } private void initData() { List<DataModel> list = new ArrayList<>(); for (int i = 0; i < 20; i++) { int type = (int) (Math.random() * 3 + 1); DataModel data = new DataModel(); data.avatarColor = colors[type - 1]; data.type = type; data.name = "Name: " + i; data.content = "Content: " + i; data.contentColor = colors[(type + 1) % 3]; list.add(data); } mAdapter.addList(list); mAdapter.notifyDataSetChanged(); } }
DemoAdapter.class
package com.example.tony.recyclerviewdemo; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; /* * Created by Tony on 2016/12/3. */ public class DemoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{ private LayoutInflater mLayoutInflater; private List<DataModel> mList = new ArrayList<>(); public DemoAdapter(Context context) { mLayoutInflater = LayoutInflater.from(context); } public void addList(List<DataModel> list) { mList.addAll(list); } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { switch (viewType) { case DataModel.TYPE_ONE: return new TypeOneViewHolder(mLayoutInflater.inflate(R.layout.item_type_one, parent, false)); case DataModel.TYPE_TWO: return new TypeTwoViewHolder(mLayoutInflater.inflate(R.layout.item_type_two, parent, false)); case DataModel.TYPE_THREE: return new TypeThreeViewHolder(mLayoutInflater.inflate(R.layout.item_type_three, parent, false)); } return null; } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { ((TypeAbstractViewHolder) holder).bindHolder(mList.get(position)); } @Override public int getItemViewType(int position) { return mList.get(position).type; } @Override public int getItemCount() { return mList.size(); } }
DataModel.class
package com.example.tony.recyclerviewdemo; /** * Created by Tony on 2016/12/3. */ public class DataModel { public static final int TYPE_ONE = 1; public static final int TYPE_TWO = 2; public static final int TYPE_THREE = 3; public int type; public int avatarColor; public String name; public String content; public int contentColor; }
TypeAbstractViewHolder.class
package com.example.tony.recyclerviewdemo; import android.support.v7.widget.RecyclerView; import android.view.View; /** * Created by Tony on 2016/12/3. */ public abstract class TypeAbstractViewHolder extends RecyclerView.ViewHolder{ public TypeAbstractViewHolder(View itemView) { super(itemView); } public abstract void bindHolder(DataModel model); }
TypeOneViewHolder.class
package com.example.tony.recyclerviewdemo; import android.view.View; import android.widget.ImageView; import android.widget.TextView; /** * Created by Tony on 2016/12/3. */ public class TypeOneViewHolder extends TypeAbstractViewHolder { private ImageView avatar; private TextView name; public TypeOneViewHolder(View itemView) { super(itemView); avatar = (ImageView) itemView.findViewById(R.id.avatar); name = (TextView) itemView.findViewById(R.id.name); } //ViewHolder數(shù)據(jù)和外面數(shù)據(jù)綁定起來(lái) @Override public void bindHolder(DataModel model) { avatar.setBackgroundResource(model.avatarColor); name.setText(model.name); } }
TypeTwoViewHolder.class
package com.example.tony.recyclerviewdemo; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.ImageView; import android.widget.TextView; /** * Created by Tony on 2016/12/3. */ public class TypeTwoViewHolder extends TypeAbstractViewHolder { private ImageView avatar; private TextView name; private TextView content; public TypeTwoViewHolder(View itemView) { super(itemView); avatar = (ImageView) itemView.findViewById(R.id.avatar); name = (TextView) itemView.findViewById(R.id.name); content = (TextView) itemView.findViewById(R.id.content); } //ViewHolder數(shù)據(jù)和外面數(shù)據(jù)綁定起來(lái) @Override public void bindHolder(DataModel model) { avatar.setBackgroundResource(model.avatarColor); name.setText(model.name); content.setText(model.content); } }
TypeThreeViewHolder.class
package com.example.tony.recyclerviewdemo; import android.view.View; import android.widget.ImageView; import android.widget.TextView; /** * Created by Tony on 2016/12/3. */ public class TypeThreeViewHolder extends TypeAbstractViewHolder { private ImageView avatar; private TextView name; private TextView content; private ImageView contentImage; public TypeThreeViewHolder(View itemView) { super(itemView); avatar = (ImageView) itemView.findViewById(R.id.avatar); contentImage = (ImageView) itemView.findViewById(R.id.contentImage); name = (TextView) itemView.findViewById(R.id.name); content = (TextView) itemView.findViewById(R.id.content); } //ViewHolder數(shù)據(jù)和外面數(shù)據(jù)綁定起來(lái) @Override public void bindHolder(DataModel model) { avatar.setBackgroundResource(model.avatarColor); name.setText(model.name); contentImage.setBackgroundResource(model.contentColor); content.setText(model.content); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android中RecyclerView實(shí)現(xiàn)多級(jí)折疊列表效果(二)
- Android中RecyclerView實(shí)現(xiàn)多級(jí)折疊列表效果(TreeRecyclerView)
- RecyclerView實(shí)現(xiàn)常見(jiàn)的列表菜單
- Android單個(gè)RecyclerView實(shí)現(xiàn)列表嵌套的效果
- Android RecyclerView實(shí)現(xiàn)數(shù)據(jù)列表展示效果
- Android使用RecyclerView實(shí)現(xiàn)自定義列表、點(diǎn)擊事件以及下拉刷新
- 使用RecyclerView實(shí)現(xiàn)水平列表
- Android列表RecyclerView排列布局
相關(guān)文章
Android控件AppWidgetProvider使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android控件AppWidgetProvider的使用方法詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Android 自定義View實(shí)現(xiàn)計(jì)時(shí)文字詳解
這篇文章主要為大家介紹了Android 自定義View實(shí)現(xiàn)計(jì)時(shí)文字詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04Android實(shí)現(xiàn)創(chuàng)建或升級(jí)數(shù)據(jù)庫(kù)時(shí)執(zhí)行語(yǔ)句
這篇文章主要介紹了Android實(shí)現(xiàn)創(chuàng)建或升級(jí)數(shù)據(jù)庫(kù)時(shí)執(zhí)行語(yǔ)句,是比較實(shí)用的功能,需要的朋友可以參考下2014-08-08kotlin實(shí)現(xiàn)快遞與號(hào)碼歸屬地查詢(xún)案例詳解
時(shí)間軸時(shí)一個(gè)很炫酷的效果,一般作用在物流信息上,我們同樣也可以作為一個(gè)學(xué)習(xí)對(duì)象去學(xué)習(xí)他的使用方法,同時(shí)呢,我們可以在線查詢(xún)我們的電話(huà)號(hào)碼歸屬地,巧用鍵盤(pán)的邏輯提升我們用戶(hù)體驗(yàn)2023-02-02Android實(shí)現(xiàn)觸發(fā)html頁(yè)面的Button控件點(diǎn)擊事件方式
這篇文章主要介紹了Android實(shí)現(xiàn)觸發(fā)html頁(yè)面的Button控件點(diǎn)擊事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03