新浦京81707con > 软件下载 > RecycleView实现混合Item布局

原标题:RecycleView实现混合Item布局

浏览次数:196 时间:2020-03-01

首先来探问效果呢:

0 简介

Material Design 是由Google程序猿们依附传统的计划条件,集合丰盛的创新意识和科学本事所发明的一套崭新的分界面设计语言,包蕴了视觉,运动,相互作用作效果能等个性.

上次咱们了一些RecycleView的始发使用过程,相比较来看ListView,就好像从未什么成都百货上千的界别。前几天大家来学习一个很有用的东西--怎么着给RecycleView加多Header。相信你在看完后能够推而广之,完结二个更加美好的RecycleView,因为中间的道理都一模一样。

作者们几近来要读书的东西:

  • RecycleView item的type写法
  • RecycleView添加onItemClick

世家都精晓,ListView是有增加header和footer这些二种办法的,不过纵观RecycleView,根本就从不提起那有关的事物,方今的叁个类型中需求在RecycleView下边加四个Banner(其实轻巧正是加多少个header),以下正是和煦对header的就学总计。

图片 1作用预览.png

1 ToolBar 控件

ToolBar 控件是Google推荐应用的,它不但继续了ActionBar的具有成效,况且接收起来拾分心闲手敏,能够和其它控件结合使用,进而构建出Material Design 效果.

观察

在Adapter中有诸有此类个章程,用来回到给大家叁个ViewHolder;

onCreateViewHolder(ViewGroup parent, int viewType)

周到看开采她的第1个参数是三个viewType,从字面上的意趣大家都精晓代表入眼前item的门类。既然开掘了,那大家就从此今后处开首早先~:

本实例来自于慕课网的视屏

1.1 掩瞒系统本来的 ActionBar

AndroidManifest.xml 文件中找到<application> 标签中的 theme 属性的值.平时是 @style/AppTheme,跳转到 AppTheme的定义(res/values/styles),如下 :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

其中的 Theme.AppCompat.Light.DarkActionBar 是三个深色的ActionBar焦点.我们能够将其替换到Theme.AppCompat.Light.NoActionBar 则能够将ActionBar隐蔽. 接着我们就能够应用ToolBar了.对MainActivity的布局文件改正如下

<!-- 
    1. xmlns:app="http://schemas.android.com/apk/res-auto" 新增的命名控件,
       主要是为了兼容 Android 5.0 以前的设备.
    2. android:theme="@style/ThemeOverlay.AppCompat.Dark" 设置ToolBar主题.
       因为我们App使用的是 Light主题,因此文字是深色,再次让此控件单独使用此
       主题,效果是显示的文字是亮的.
    3. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 设置菜单主题色.
       popupTheme 属性是 5.0 新增因此需要使用app命名空间做兼容处理.
    4. android:layout_height="?attr/actionBarSize" 设置ToolBar的高度和
       ActionBar一样.
-->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@ id/activity_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!-- ToolBar 替代 ActionBar -->
    <android.support.v7.widget.Toolbar
        android:id="@ id/tb_actionbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        />
</RelativeLayout>

随之在Activity中展开安装

// 1. 找到Toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.tb_actionbar);
// 2. 设置ActionBar
setSupportActionBar(toolbar);

那般基本的宏图就完了了.效果和ActionBar看上去相像.

操作

修改咱们的Adapter

//改变了ViewHolder类型
public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
 //设置item的两种类型
  public static final int TYPE_HEADER = 0;
  public static final int TYPE_NORMAL = 1;
//设置HeaderView
  public void setHeaderView(View headerView) {    
    mHeaderView = headerView;    
    notifyItemInserted(0);
    }
//设置setOnItemClickListener
public void setOnItemClickListener(OnItemClickListener listener){    mListener = listener;}

  @Override
  public int getItemViewType(int position) {   
     if (mHeaderView == null){       
           return TYPE_NORMAL;    
      }else if (position ==0){
        return TYPE_HEADER;    
      }else {
        return TYPE_NORMAL; 
   }
}
//onCreatViewHolder中
  if (mHeaderView != null && viewType == TYPE_HEADER) {
      return new Holder(mHeaderView);
    }
  View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_normal, parent, false);
  return new Holder(layout);

//onBindViewHolder中
  if(getItemViewType(position) == TYPE_HEADER) return;
  final int pos = getRealPosition(holder);
  final String data = dataLists.get(pos);
  if(holder instanceof Holder) {
    ((Holder) holder).mTextView.setText(data);
    if(mListener == null) return;    
  holder.itemView.setOnClickListener(new View.OnClickListener() {        
        @Override
        public void onClick(View v) {
            mListener.onItemClick(pos, data);
        }

});
}
//得到添加了Header后准确的position
  public int getRealPosition(RecyclerView.ViewHolder holder) {
    int position = holder.getLayoutPosition();
    return mHeaderView == null ? position : position - 1;
}

public  class Holder extends RecyclerView.ViewHolder {
    public TextView mTextView;
    public Holder(View itemView)    {
        super(itemView);
        if (itemView== mHeaderView) return;
        mTextView = (TextView)itemView.findViewById(R.id.item_normal_tv);
    }
}
}

在此通过if语句分别在onCreatViewHolder和onBindViewHolder中分别开展判定,加载不一样的View,並且对两样的view进行操作,代码超轻易,基本上跟着注释就看明白了。
在Adapter里面供给选取的文件:
OnItemClickListener的接口

public interface OnItemClickListener { 
   void onItemClick(int position,String data);
}

header的结构文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  android:orientation="vertical"    
  android:layout_width="match_parent"    
  android:layout_height="wrap_content">    
  <ImageView        
    android:layout_margin="16dp"        
    android:layout_gravity="center_horizontal"        
    android:layout_width="wrap_content"        
    android:layout_height="wrap_content"        
    android:src="@mipmap/ic_launcher"/>
 </LinearLayout>

结构文件超级粗略,笔者就放了一张图纸,具体的按项目供给来就可以;

接下去正是Activity了,看懂了Adapter,再看Activity就大致的很了:

//添加一个方法
  private void setHeader(RecyclerView view){
    View header = LayoutInflater.from(this).inflate(R.layout.header, view, false);
    myAdapter.setHeaderView(header);
}

...
//找OnCreat里面加入一行就OK
setHeader(recyclerView);

在档案的次序的build.gradle文件中增添上边包车型客车重视性

1.2 为 ToolBar 添加action

  • res/ 下创建 menu 文件夹,然后在res/menu/ 下创建 toolbar_menu.xml内容如下 :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!--
        1. app:showAsAction="always" 用来设置按钮的显示位置.
            1.1 always : 永远显示在Toolbar 中.
            1.2 ifRoom : 如果空间足够则显示在ToolBar中.
            1.3 never  : 永远显示在菜单中
        2. ToolBar 中的Action只会显示图片,菜单中的action只会显示文字.
    -->
    <item android:id="@ id/tb_backup"
          android:title="BackUp"
          android:icon="@drawable/icon_backup"
          app:showAsAction="always"
        />
    <item android:id="@ id/tb_delete"
          android:title="Delete"
          android:icon="@drawable/icon_delete"
          app:showAsAction="ifRoom"
        />
    <item android:id="@ id/tb_settings"
          android:title="Settings"
          android:icon="@drawable/icon_settings"
          app:showAsAction="never"
        />
</menu>
  • 在Activity总重写和菜单相关的艺术
// 加载菜单布局文件.
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar_menu,menu);
    return true;
}
// 添加菜单选项点击事件. 我们在每一个action使用Toast进行提示.
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.tb_backup:
            Toast.makeText(MainActivity.this,"备份",Toast.LENGTH_SHORT).show();
            break;
        case R.id.tb_delete:
            Toast.makeText(MainActivity.this,"删除",Toast.LENGTH_SHORT).show();
            break;
        case R.id.tb_settings:
            Toast.makeText(MainActivity.this,"设置",Toast.LENGTH_SHORT).show();
            break;
    }
    return true;
}

运路程序效果图如下 :

图片 2

ToolBar 效果图

运行

产生了地点的就早已做到了header 的丰富,大家运转一下寻访效果:

图片 3

Paste_Image.png

图片 4

Paste_Image.png

是否就曾经产生大家的指标了呢~~~愉快的继续撸代码吧~

compile 'com.android.support:recyclerview-v7:25.0.0'

2 滑动菜单

滑动菜单就是将部分单选项掩瞒起来,并不是身处主荧屏上,然后能够透过滑行将菜单展现出来.那zhong种格局节省了空中又完毕了丰富好的滑动作效果果.Material Design 推荐应用这种方式. Google提供了DrawerLayout 控件来促成这种效果.

也得以在下图中自行实行依赖,选取RecycleView就可以。

2.1 DrawerLayout 使用

在DrawerLayout 结构中允许增加四个直接子控件, 第叁个是显示器中体现的原委;第三个是菜单中显示的内容.今后我们对Activity结构文件举行如下改正.

<!-- 将根布局替换成 DrawLayout  -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@ id/dl_main"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!-- 屏幕中的内容 -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@ id/tb_actionbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />
    </FrameLayout>
    <!--
        菜单中的内容
        1. android:layout_gravity="start" 该属性必须设置,
           它表示了菜单弹出的方向.
           start : 表示根据系统语言进行判断弹出方向.
           left  : 左侧弹出
           right : 右侧弹出.
     -->
    <TextView
        android:layout_width="match_parent"
        android:layout_gravity="start"
        android:text="菜单"
        android:textSize="32sp"
        android:background="#FF00FF"
        android:layout_height="match_parent"/>
</android.support.v4.widget.DrawerLayout>

那会儿运作程序就能够从通过边缘滑动将菜单展现出来 效果图如下.

图片 5

Paste_Image.png

接下去大家将要ToolBar 中增加三个开关通过点击该按键来贯彻打开菜单,相像于QQ上的点击头像,引出菜单.我们纠正Activity代码如下:

  • onCreate() 加多如下代码.

    • 我们率先通过 findViewById() 方法赢获得DrawerLayout实例.
    • 通过 getSupportActionBar() 来获取到ActionBar实例,当时的ActionBar实际是叁个ToolBar.
    • 通过 setDisplayHomeAsUpEnabled(true) 方法让导航按键展现出来.
    • 通过 setHomeAsUpIndicator() 来设置导航按钮的Logo.
// 实现按钮弹出菜单
mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_main);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
    // 设置显示导航按钮.也就是返回按钮
    actionBar.setDisplayHomeAsUpEnabled(true);
    // 设置返回按钮的图片
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
  • 在 onOptionsItemSelected 中加多如下代码

    • switch(item.getItemId()) 中加进三个case分支 .用于拍卖客户点击导航按键时的响应管理.
    • 通过 DrawerLayout 的 openDrawer() 展开菜单. 该函数供给传入三个Gravity参数.

精心 :系统提供的领航按键的id是 android.R.id.home

// 新增加一个case 判断
case android.R.id.home:
// 弹出菜单.
mDrawerLayout.openDrawer(GravityCompat.START);
break;

图片 6

2.2 NavigationView 的使用

NavigationView 是 design support 库中提供的三个控件 ,它严峻依照 Material Design 来统筹的 , 它使滑动菜单的贯彻变的至极简单. 它通常分为上下两有的;上边是菜单选项,上边是此外新闻.

在乎 : 由于大家须求运用design support库和图片kuang'jia框架由此需求加上如下重视

// 添加design support 库依赖
compile 'com.android.support:design:24.2.1'
// 添加圆形图片裁剪图第三方库依赖
compile 'de.hdodenhof:circleimageview:2.1.0'
  • res/menu/下创办菜单结构文件 nav_menu.xml 内容如下:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
        1. android:checkableBehavior="single" 设置在该组中的item是单选的.
    -->
    <group android:checkableBehavior="single">
        <item
            android:id="@ id/nav_call"
            android:title="Call"
            android:icon="@drawable/ic_menu_call"
            />
        <item
            android:id="@ id/nav_friend"
            android:title="Friend"
            android:icon="@drawable/ic_menu_friend"
            />
        <item
            android:id="@ id/nav_location"
            android:title="Location"
            android:icon="@drawable/ic_menu_location"
            />
        <item
            android:id="@ id/nav_mail"
            android:title="Mail"
            android:icon="@drawable/ic_menu_mail"
            />
        <item
            android:id="@ id/nav_task"
            android:title="Tasks"
            android:icon="@drawable/ic_menu_task"
            />
    </group>
</menu>
  • 创办上半有个别搭架子文件.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
                android:padding="10dp"
                android:background="?attr/colorPrimary"
              android:layout_height="180dp">
    <!-- 使用圆形图片框架 -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:id="@ id/iv_head_pic"
        android:src="@drawable/head_pic"
        android:layout_centerInParent="true"
        android:layout_height="70dp"/>
    <TextView
        android:layout_width="wrap_content"
        android:id="@ id/tv_mail"
        android:text="wsj_china_cpu@163.com"
        android:textSize="14sp"
        android:textColor="#FFF"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_width="wrap_content"
        android:id="@ id/tv_name"
        android:layout_above="@id/tv_mail"
        android:text="WSJ"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:layout_height="wrap_content"/>

</RelativeLayout>
  • 将MainActivity的结构文件中的TextView替换来 NavigationView
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:id="@ id/nav_view"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/header_layout"
android:layout_height="match_parent"/>
  • 在 MainActivity 的onCreate() 中加多如下代码

    • 第一获得到NavigationView实例.
    • 通过 setCheckedItem() 设置私下认可选项的item
    • 通过 setNavigationItemSelectedListener 设置item点击事件监听.
    • 应用Toast打字与印刷点击的选项.
    • 通过 closeDrawers() 关闭菜单.
 // 导航菜单
 NavigationView navigationView =
         (NavigationView) findViewById(R.id.nav_view);
 // 设置默认选项
 navigationView.setCheckedItem(R.id.nav_call);
 // 设置Item点击
 navigationView.setNavigationItemSelectedListener(
         new NavigationView.OnNavigationItemSelectedListener() {
     @Override
     public boolean onNavigationItemSelected(@NonNull MenuItem item) {
         switch (item.getItemId()){
             case R.id.nav_call:
                 Toast.makeText(MainActivity.this
                         ,"电话",Toast.LENGTH_SHORT).show();
                 break;
             case R.id.nav_friend:
                 Toast.makeText(MainActivity.this
                         ,"朋友",Toast.LENGTH_SHORT).show();
                 break;
             case R.id.nav_mail:
                 Toast.makeText(MainActivity.this
                         ,"邮件",Toast.LENGTH_SHORT).show();
                 break;
             case R.id.nav_location:
                 Toast.makeText(MainActivity.this
                         ,"地位",Toast.LENGTH_SHORT).show();
                 break;
             case R.id.nav_task:
                 Toast.makeText(MainActivity.this
                         ,"任务",Toast.LENGTH_SHORT).show();
                 break;
         }
         // 关闭菜单
         mDrawerLayout.closeDrawers();
         return true;
     }
 });

那会儿的成效图如下

图片 7

Paste_Image.png

直白代码传送门MainActivity

3 悬浮按键和可相互提示

立面设计员Material Design中的一条拾贰分主要的设计观念. 悬浮开关就反映了立面设计的观念.这种按键不归属主分界面包车型地铁一有的,而是坐落于其余四个纬度,给人一种浮泛的感到.

public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private MyAdapter mMyAdapter; private int colors[] = {android.R.color.holo_blue_bright,android.R.color.black,android.R.color.holo_red_dark}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } private void initView() { mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerView); mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)); mMyAdapter = new MyAdapter; mRecyclerView.setAdapter(mMyAdapter); } private void initData() { List<Person> list= new ArrayList<>(); for (int i = 0; i < 20; i  ) { Person p = new Person(); int type =  (Math.random; p.type = type; p.content="content" 1; p.avaterColor = colors[type-1]; p.name = "name" i; list.add; } mMyAdapter.addList; mMyAdapter.notifyDataSetChanged(); }}

3.1 FloatActionButton 使用

FloatActionButton 是谷歌(Google卡塔尔(قطر‎提供的漂移开关控件.

  • 在 MainActivity中添加FloatActionButton.
<!--
    添加悬浮按钮
    1. app:elevation="8dp" 指定高度值(立体) 高度值也大投影就越大,
       投影效果也就越淡.
 -->
<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:id="@ id/fab"
    android:layout_gravity="bottom|end"
    android:layout_margin="16dp"
    android:src="@drawable/ic_done"
    app:elevation="8dp"
    android:layout_height="wrap_content"/>
  • 在MainActivity中加多点击事件
// 悬浮按钮的点击事件.
FloatingActionButton fab =
        (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this,"悬浮框",
                Toast.LENGTH_SHORT).show();
    }
});

本文由新浦京81707con发布于软件下载,转载请注明出处:RecycleView实现混合Item布局

关键词: 新浦京81707con Android知识 布局 RecycleView Item

上一篇:最全Android刘海屏适配方案,状态栏适配

下一篇:没有了