实现效果
布局分析
<?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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/abc_vector_test" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:headerLayout="@layout/nav_header"
android:layout_gravity="start"
app:menu="@menu/nav_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
1.首先如果我们要实现侧滑栏效果，就得用DrawerLayout，
2.然后用CoordinatorLayout包裹内容（可以理解成framelayout），但是CoordinatorLayout有material的一些特性。
3.用NavigationView包裹，实现侧边栏里面的内容。
4.AppBarLayout可以再recycleview滑动的时候不影响toolbar
5.Toolbar 标题栏
6.SwipeRefreshLayout可以实现数据的刷新效果
7.FloatingActionButton实现悬浮按钮。
8.NestedScrollView（类似与scrollview）只允许存放一个直接布局
实现侧边栏
/**
* 对侧边栏的操作
*/
private void init_drawlayout() {
drawerLayout=findViewById(R.id.drawer_layout);
Toolbar toolbar =findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final NavigationView navigationView = findViewById(R.id.nav_view);
ActionBar actionBar =getSupportActionBar();
//再标题栏添加一个图片用于侧滑栏操作
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(android.R.drawable.ic_input_get);
/* drawerLayout.openDrawer(GravityCompat.START);*/
}
//默认第一个
navigationView.setCheckedItem(R.id.nav_call);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
drawerLayout.closeDrawers();
return true;
}
});
}
nav_item
<?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"
android:padding="10dp"
android:background="#009688">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:id="@+id/animal"
android:src="@drawable/animal"
android:layout_centerInParent="true"/>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/mail"
android:layout_alignParentBottom="true"
android:text="[email protected]"
android:textSize="20sp"
android:textColor="#fff"/>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/username"
android:layout_above="@+id/mail"
android:textSize="20sp"
android:textColor="#fff"
android:text="William——tao"
/>
</RelativeLayout>
nav_menu
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
//只能单选
<item
android:id="@+id/nav_call"
android:title="Call" />
<item
android:id="@+id/nav_friends"
android:title="Friends" />
<item
android:id="@+id/nav_location"
android:title="Location" />
<item
android:id="@+id/nav_mail"
android:title="Mail" />
<item
android:id="@+id/nav_task"
android:title="Tasks" />
</group>
</menu>
recycleview适配器
对recycleview有疑问可以参考
RecycleView小白入门详解（教你全面掌握其用法）
public class MyApdater extends RecyclerView.Adapter<MyApdater.MyViewHolder> {
private Context mcontext;
private List<Fruit> mlist;
public MyApdater(Context context , List<Fruit> mlist) {
this.mcontext = context;
this.mlist = mlist;
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
if (mcontext == null) {
mcontext = parent.getContext();
}
View view = LayoutInflater.from(mcontext).inflate(R.layout.fruit_item,parent,false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(@NonNull MyApdater.MyViewHolder holder, int position) {
Fruit fruit = mlist.get(position);
holder.fruitName.setText(fruit.getName());
Glide.with(mcontext).load(fruit.getImgageId()).into(holder.fruitImage);
}
@Override
public int getItemCount() {
return mlist.size();
}
class MyViewHolder extends RecyclerView.ViewHolder{
CardView cardView;
ImageView fruitImage;
TextView fruitName;
public MyViewHolder(View view) {
super(view);
cardView = (CardView) view;
fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
fruitName = (TextView) view.findViewById(R.id.fruit_name);
}
}
}
存放水果类信息的类
package com.mt.zfruitproject;
public class Fruit {
private String name;
private int imgageId;
public Fruit(String name, int imgageId) {
this.name = name;
this.imgageId = imgageId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getImgageId() {
return imgageId;
}
public void setImgageId(int imgageId) {
this.imgageId = imgageId;
}
}
FloatingActionButton悬浮按钮
/**
* 对悬浮按钮的操作
*/
private void init_floatButton() {
button = findViewById(R.id.fab);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view,"你使用了Snackbar",Snackbar.LENGTH_SHORT).
setAction("确定", new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity.this,"你使用了Toast",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
}
数据初始化
/**
* 初始化列表
*/
private void initFruits() {
fruitList.clear();
for (int i = 0; i < 50; i++) {
Random random = new Random();
int index = random.nextInt(fruits.length);
fruitList.add(fruits[index]);
}
}
recycleview绑定适配器
/**
* recycleview相关操作
*/
private void init_recycleview() {
recyclerView=findViewById(R.id.recycler_view);
GridLayoutManager gird = new GridLayoutManager(this,2);
recyclerView.setLayoutManager(gird);
apdater =new MyApdater(this,fruitList);
recyclerView.setAdapter(apdater);
}
SwipeRefreshLayout 刷新数据
/**
* 刷新数据
*/
@SuppressLint("ResourceAsColor")
private void init_refreshFruits(){
swipeRefreshLayout = findViewById(R.id.swipe_refresh);
swipeRefreshLayout.setColorSchemeColors(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() {
initFruits();
apdater.notifyDataSetChanged();
swipeRefreshLayout.setRefreshing(false);
}
});
}
}).start();
}
每一项的布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="@drawable/img1"/>
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="16sp"
android:text="水果捞"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
点击事件的处理
现再外面的展示数据效果以及出来，现在希望，当外面点击某一个图片的时候，回跳转到另一个界面，展示数据信息。
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (mContext == null) {
mContext = parent.getContext();
}
View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item, parent, false);
final ViewHolder holder = new ViewHolder(view);
//每当点击一个cardview的时候就把里面的值放在intent里面，同时跳转到FruitActivity
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
int position = holder.getAdapterPosition();
Fruit fruit = mFruitList.get(position);
Intent intent = new Intent(mContext, FruitActivity.class);
intent.putExtra(FruitActivity.FRUIT_NAME, fruit.getName());
intent.putExtra(FruitActivity.FRUIT_IMAGE_ID, fruit.getImgageId());
mContext.startActivity(intent);
}
});
return holder;
}
FruitActivity实现
<?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"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true">
<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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/fruit_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/fruit_content_text"
android:layout_width="match_parent"
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/abc_vector_test"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
package com.mt.zfruitproject;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.content.Intent;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.google.android.material.appbar.CollapsingToolbarLayout;
public class FruitActivity extends AppCompatActivity {
public static final String FRUIT_NAME = "fruit_name";
public static final String FRUIT_IMAGE_ID = "fruit_image_id";
String fruitName;
int fruitImageId;
ImageView fruitImageView;
TextView fruitContentText;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fruit);
//获取MainActivity传来的值,并赋值
get_intent();
//toolbar
set_toolbar();
//
set_CollapsingToolbarLayout();
}
private void set_CollapsingToolbarLayout() {
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle(fruitName);
}
private void set_toolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
/*
*获取intent里面的值，并将值赋值给空间
*/
private void get_intent() {
Intent intent = getIntent();
fruitName = intent.getStringExtra(FRUIT_NAME);
fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID, 0);
fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);
fruitContentText = (TextView) findViewById(R.id.fruit_content_text);
//通过Glide加载图片
Glide.with(this).load(fruitImageId).into(fruitImageView);
//通过循环语句，为fruitName赋值
String fruitContent = generateFruitContent(fruitName);
fruitContentText.setText(fruitContent);
}
/**
* 为每一个标题里面设置值
* @param fruitName
* @return
*/
private String generateFruitContent(String fruitName) {
StringBuilder fruitContent = new StringBuilder();
for (int i = 0; i < 500; i++) {
fruitContent.append(fruitName);
}
return fruitContent.toString();
}
/**
* 返回按钮的实现
* @param item
* @return
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
}