Android-Material Design实战

程序员文章站 2023-12-28 21:10:28

目录什么是Material DesignToolbar什么是Material DesignMaterial Design 是谷歌的一套全新的界面设计语言，包含了视觉，运动，互动效果等特性。Design Support库，将Material Design中最具代表性的一些控件和效果进行了封装。ToolbarToolabr继承了ActionBar的所有功能，，灵活性很高，而且可配合其他控件来完成一些Material Design效果。1.更改程序的ActionBar主题2.在布局中添加Toolba...

什么是Material Design

Material Design 是谷歌的一套全新的界面设计语言，包含了视觉，运动，互动效果等特性。
Design Support库，将Material Design中最具代表性的一些控件和效果进行了封装。

Toolbar

Toolabr继承了ActionBar的所有功能，，灵活性很高，而且可配合其他控件来完成一些Material Design效果。

创建的基本步骤：
1.更改程序的ActionBar主题
2.在布局中添加Toolbar控件
3.活动中设置支持动作栏
示例：
1.
把之前默认的深色主题改为不带ActionBar的主题

<resources>
    <!-- Base application theme. -->
    <!-- Theme.AppCompat.Light.NoActionBar不带标题栏淡色主题 -->
    <!-- Theme.AppCompat.Light.NoActionBar不带标题栏的深色主题 -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Android-Material Design实战
2.

<androidx.appcompat.widget.Toolbar
	  android:layout_width="match_parent"
	  android:layout_height="?attr/actionBarSize"
	  android:id="@+id/toolbar"
	  android:background="?attr/colorPrimary"
	  android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
	  app:popupTheme="@style/ThemeOverlay.AppCompat.Light"         
                />
     <!-- android:theme 设置Toolbar的主题风格-->
     <!-- app:popupTheme 单独指定弹出的菜单项的主题-->

 Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

修改标题栏上显示的文字内容

 <activity
       android:name=".MainActivity"
       android:label="在这修改">    
</activity>

在activity标签中修改，如果没有指定，默认用application中指定的label内容。

添加action按钮
和添加普通菜单流程基本一样。
1.创建菜单项的xml文件
注：
app:showAsAction 指示按钮的显示位值，always：永远显示在Toolbar中,ifRoom：屏幕空间足够的情况下显示在Toolbar中，never：永远显示在菜单中
如果菜单项指定图标，Toolbar的action按钮只显示图标，菜单中的action只显示文字

<?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">
    <item
        android:id="@+id/item1"
        android:title="Backup"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item2"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/item3"
        android:title="Setting"
        app:showAsAction="never"/>

</menu>

2.加载菜单文件

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbarmenu,menu);
        return true;
    }

3.设置点击事件

 @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case R.id.backup:
                Toast.makeText(this,"you clicked Backup",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"you clicked delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"you clicked settings",Toast.LENGTH_SHORT).show();
                break;
           
        }
        return true;
    }

滑动菜单

示例：
Android-Material Design实战

DrawerLayout

DrawerLayout控件可用来实现滑动菜单的效果。首先它是一个布局，在布局中允许放入两个直接子控件，第一个子控件用于显示主屏幕中的内容，第二个子控件用于显示滑动菜单中的内容
示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


    </FrameLayout>

    <TextView
        android:id="@+id/text_view"
        android:text="This is menu"
        android:background="#fff"
        android:textSize="30sp"
        android:layout_gravity="start"//侧拉栏的布局必须声明这一属性，left表示侧拉栏在左，right表示侧拉栏在右，start则会根据系统语言来自动选择
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.drawerlayout.widget.DrawerLayout>

设置友好提示
滑动菜单只有在屏幕的边缘进行拖动时才将菜单拖出来，有些用户可能不知道这个功能，Material Design建议的做法是在Toolbar左边加一个导航按钮。
代码实现：

 	private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
      
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        
        drawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
        
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);      //让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);   //设置导航按钮图标，默认是返回的图标
        }
    }
      @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
          ...
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                //将滑动菜单展示出来
        }
        return true;
    }

NavigationView

NavigationView是Design Support库中的一个控件，借助它，可让滑动菜单页面的实现变得简单。

添加依赖

implementation 'com.android.support:design:28.0.0'
implementation 'de.hdodenhof:circleimageview:3.1.0'

第二个是开源项目CircleimageView的依赖，GitHub地址，借助它可轻松实现图片圆形化的功能。

准备menu

在menu下新建xml文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:checkableBehavior="single">
        <!-- group表示一个组，android:checkableBehavior="single"表示组中的所有菜单项只能单选 -->
        <item
            android:id="@+id/item_cgl1"
            android:title="grape"
            android:icon="@drawable/grape"/>
        <item
            android:id="@+id/item_cgl2"
            android:title="orange"
            android:icon="@drawable/orange"/>
        <item
            android:id="@+id/item_cgl3"
            android:title="pear"
            android:icon="@drawable/pear"/>
        <item
            android:id="@+id/item_cgl4"
            android:title="watemelon"
            android:icon="@drawable/watemelon"/>
    </group>


</menu>

写headLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp">          <!-- 180dp是NavigationView比较合适的高度 -->
    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/header_image"
        android:src="@drawable/pear"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/header_textView1"
        android:text="1234544657@qq.com"
        android:textSize="14sp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:textColor="#191515"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/header_textView2"
        android:text="GOON TST"
        android:textSize="14sp"
        android:layout_above="@id/header_textView1"
        android:textColor="#150A0A"
        />


</RelativeLayout>

使用NavigationView

<androidx.drawerlayout.widget.DrawerLayout 
	.......
    <com.google.android.material.navigation.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/circleimagemenu"
        app:headerLayout="@layout/headerlayout"/>
        <!-- app:menu 显示具体菜单项 -->
       	<!-- app:headerLayout 显示头部布局 -->
</androidx.drawerlayout.widget.DrawerLayout>

5.处理菜单项的点击事件

 navigationView.setCheckedItem(R.id.item_cgl1);      //设置菜单项的默认选中
        //对菜单项设置监听
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                drawerLayout.closeDrawers();        //将滑动菜单关闭
                return true;
            }
        });

悬浮按钮和可交互提示

悬浮按钮

悬浮按钮就是我们常见的桌面悬浮球
用法示例:

在布局中添加

<com.google.android.material.floatingactionbutton.FloatingActionButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/fab"
     android:src="@drawable/pear"
     android:layout_gravity="bottom|right"
     android:layout_margin="16dp"
     app:elevation="8dp"
 />
 <!-- elevation给FloatingActionButton指定一个高度值，高度值越大，
 	   投影范围越大，投影效果越淡 -->

点击事件

 //FloatingActionButton点击事件
		FloatingActionButton floatingActionButton = (FloatingActionButton)findViewById(R.id.fab);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {             
            	Toast.makeText(MainActivity.this,"click",Toast.LENGTH_SHORT).show();
            }
        });

Snackbar

Snackbar是Design Support库提供的更加先进的提示工具，允许在提示中加入一个可交互按钮，让用户点击按钮时可以执行一些额外的逻辑操作。
用法：
和Toast类似，改写刚才的点击事件

//FloatingActionButton点击事件
        FloatingActionButton floatingActionButton = (FloatingActionButton)findViewById(R.id.fab);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v,"Data delete",Snackbar.LENGTH_SHORT)
                //添加按钮
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this,"click",Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();

            }
        });

CoordinatorLayout

CoordinatorLayout是一个加强版的FrameLayout,可以监听所有子控件的各种事件，自动帮我们做出最为合理的响应
在刚才的Snackbar弹出后会遮挡FloatingActionButton，如果我们使用CoordinatorLayout布局，他可以监听到Snackbar的弹出事件，它会自动将内部的FloatingActionButton向上偏移。
用法示例:
直接把刚才的FrameLayout替换成CoordinatorLayout

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
           ......
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

卡片式布局

CardView

卡片式布局可以让页面中的元素看起开就像在卡片中一样，并且有圆角和投影。它是由appcompat-v7库提供。接下来用Recyclerview进行展示

注：Glide库，GitHub地址，是一个超级强大的图片加载库，不仅可以用来加载本地图片，还可以加载网络图片，GIF图片，甚至是本地视频

布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        ...
            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/recyclerview"
                />
	</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.drawerlayout.widget.DrawerLayout>

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp"
    >
    <!--  app:cardCornerRadius 设置卡片圆角的弧度-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:scaleType="centerCrop"/>      <!-- 指定图片的缩放模式，他可以让图片保持原有比例填充ImageView,并裁掉超出部分 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_textview"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>


</androidx.cardview.widget.CardView>

代码部分
Fruit.class

package com.example.revise_12_1;

public class Fruit {
    private String Name;
    private int imageId;

    public Fruit(String name, int imageId) {
        Name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return Name;
    }

    public int getImageId() {
        return imageId;
    }
}

Myadapt.class

public class Mydapt extends RecyclerView.Adapter<Mydapt.ViewHolder> {
    private List<Fruit> list;
    private Context mcontext;
    public Mydapt(List<Fruit> list) {
        this.list = list;
    }

    class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView imageView;
        TextView textView;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            cardView = (CardView) itemView;
            imageView = itemView.findViewById(R.id.item_image);
            textView = itemView.findViewById(R.id.item_textview);
        }
    }
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if(mcontext==null){
            mcontext = parent.getContext();
        }
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        ViewHolder viewHolder = new ViewHolder(view);

        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit = list.get(position);
        holder.textView.setText(fruit.getName());
        Glide.with(mcontext).load(fruit.getImageId()).into(holder.imageView);       //用Glide加载图片

    }

    @Override
    public int getItemCount() {
        return list.size();
    }


}

MainActivity

	private Mydapt adapt;
    private List<Fruit> list = new ArrayList<>();

	
		addlist();
        RecyclerView recyclerView = (RecyclerView)findViewById(R.id.recyclerview);
        GridLayoutManager manager = new GridLayoutManager(MainActivity.this,2);
        adapt = new Mydapt(list);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(adapt);


	private void addlist() {
        list.clear();
        Fruit[] fruits = {new Fruit("grape",R.drawable.grape),new Fruit("orange",R.drawable.orange),
                new Fruit("pear",R.drawable.pear),new Fruit("watemelon",R.drawable.watemelon)};
        for(int i  =0; i < 50 ;i++){
            Random random = new Random();
            int index = random.nextInt(fruits.length);
            list.add(fruits[index]);
        }
    }

AppBarLayout

刚才在运行程序后会出现RecyclerView遮挡Toolbar的情况，是由于CoordinatorLayout布局是一个加强版的FrameLayout,所有控件在不进行明确定位的情况下会默认摆放在布局左上角。
我们可用AppBarLayout来解决，它实际上是一个垂直方向的LinearLayout,他的内部做了很多滚动事件的封装
注：
AppBarLayout 只有作为 CoordinatorLayout 的直接子 View 时才能正常工作，为了让 AppBarLayout 能够知道何时滚动其子 View，
我们还应该在 CoordinatorLayout 布局中提供一个可滚动 View，我们称之为 Scrolling View。
Scrolling View 和 AppBarLayout 之间的关联，通过将 Scrolling View 的 Behavior 设为 AppBarLayout.ScrollingViewBehavior 来建立。

用法示例：
1.将AppBarLayout镶嵌到Toolbar中
2.指定Recyclerview的布局行为

<androidx.coordinatorlayout.widget.CoordinatorLayout
       ......
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.appcompat.widget.Toolbar
                ......
                app:layout_scrollFlags="scroll|enterAlways|snap"
                />
  <!-- layout_scrollFlags :
  		scroll表示向上滚动时Toolbar滚动并实现隐藏，
  		enenterAlways表示向下滚动时Toolabr向下滚动并重现
        snap表示当Toolbar还没有完全隐藏或显示时，根据当前滚动的距离，
        选择隐藏还是显示 
 -->

        </com.google.android.material.appbar.AppBarLayout>
         <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/recyclerview"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
           />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

&emsp

下拉刷新

SwipeRefreshLayout类是实现下拉刷新功能的核心类。
用法示例：
给Recyclerview添加下拉刷新功能

在布局中添加SwipeRefreshLayout

 <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/srf"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/recyclerview"
                />

        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

由于是给RecyclerView添加下拉刷新，直接在RecyclerView的外层嵌套

2.刷新逻辑：

private SwipeRefreshLayout swipeRefreshLayout;
protected void onCreate(Bundle savedInstanceState) {
       ......
        //下拉刷新：
        swipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.srf);
        swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);       
        //设置颜色
        //下拉刷新的监听器
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshFruits();
            }
        });

    }
     private void refreshFruits() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        addlist();
                        adapt.notifyDataSetChanged();
                        swipeRefreshLayout.setRefreshing(false);        
                        //刷新事件结束，并隐藏刷新进度条
                    }
                });
            }
        }).start();
    }

可折叠式标题栏

CollapsingToolbarLayout

CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，可以让Toolbar的效果更华丽，只能作为AppBarLayout的直接子类布局使用。
用法示例：
新建一个活动，修改布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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"
    >
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appbar">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
    <!--exitUntilCollapsed随着滚动完成折叠之后就保留在界面上，不在移出屏幕 -->
            <ImageView
                android:id="@+id/image2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar2"
                app:layout_collapseMode="pin"/>
    <!--app:layout_collapseMode指定折叠模式
		parallax  在折叠过程中出现一定的错位
		pin 在折叠过程中位置始终保持不变
    -->            
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>



    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">
                <TextView
                    android:id="@+id/textview2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    />

            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/pear"
        app:layout_anchor="@id/toolbar2"
        app:layout_anchorGravity="bottom|end"/>
    <!--layout_anchor设置瞄点 -->



</androidx.coordinatorlayout.widget.CoordinatorLayout>

NestedScrollView布局用于显示水果详情，增强版的ScrollView，不仅允许使用滚动的方式来查看屏幕以外的数据，而且还增加了响应滚动事件的功能。
注：它的内部只允许出现一个直接子布局
活动逻辑代码：

public class FruitActivity extends AppCompatActivity {
    public static final String FRUIT_NAME = "fruit_name";
    public static final String FRUIT_IMAGE_ID = "fruit_image_id";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fruit);
        Intent intent = getIntent();
        String fruitName = intent.getStringExtra(FRUIT_NAME);
        int imageId = intent.getIntExtra(FRUIT_IMAGE_ID,0);
		
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
        ImageView imageView = (ImageView)findViewById(R.id.fruit_image_view);
        TextView textView = (TextView)findViewById(R.id.fruit_content_text);
        
        setSupportActionBar(toolbar);	//设置支持标题栏
        //设置返回键
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        
        collapsingToolbarLayout.setTitle(fruitName);
        Glide.with(this).load(imageId).into(imageView);
        String fruitContent = geterateFruitContent(fruitName);
        textView.setText(fruitContent);
    }

    private String geterateFruitContent(String fruitName) {
        StringBuilder fruitContent = new StringBuilder();
        for(int i = 0;  i < 500; i++){
            fruitContent.append(fruitName);
        }
        fruitContent.reverse();
        return fruitContent.toString();
    }
	//返回键执行的逻辑
    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
       
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

主活动调用代码;
设置RecyclerView的点击事件

public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        if(mContext==null)
            mContext = parent.getContext();
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        final ViewHolder viewHolder = new ViewHolder(view);
        viewHolder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewHolder.getAdapterPosition();
                Fruit fruit = list.get(position);
                Intent intent = new Intent(mContext,FruitActivity.class);
                intent.putExtra(FruitActivity.FRUIT_NAME,fruit.getName());
                intent.putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.getImageId());
                mContext.startActivity(intent);
            }
        });
        return viewHolder;
    }

效果展示:
Android-Material Design实战

完整代码

GitHub地址

本文地址：https://blog.csdn.net/haazzz/article/details/108807247

相关标签： Android第一行代码 app 安卓 java 移动开发 viewpager

Android-Material Design实战

目录

什么是Material Design

Toolbar

滑动菜单

DrawerLayout

NavigationView

悬浮按钮和可交互提示

悬浮按钮

Snackbar

CoordinatorLayout

卡片式布局

CardView

AppBarLayout

下拉刷新

可折叠式标题栏

CollapsingToolbarLayout

完整代码

五个Pandas 实战案例带你分析操作数据

Android-Material Design实战

网站推广经验实战：百度搜索推广之实操分享

站长实战分析：推广网站最有效的6大技巧

ASP.NET Core Identity 实战（4）授权过程

ASP.NET Core Identity 实战（3）认证过程

PHP开发实战权威指南-读书小结

yii2 实战教程之如何安装，yii2实战教程

实战:自定义脚本启动mysql-mysql5.6.19_MySQL

实战:mysql5.6跳过指定事务GTID_MySQL