Android中CoordinatorLayout(粘性菜单)的使用
程序员文章站
2022-05-26 20:36:46
...
CoordinatorLayout简介
CoordinatorLayout是在 Google IO/15 大会发布的,遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果
CoordinatorLayout简介通常用来 干什么
CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views
简单来说:
- 作为最上层的View
- 作为一个 容器与一个或者多个子View进行交互
下面我来实现一个效果,就是头部是viewPager滚动轮播,中心是菜单栏,菜单栏是粘性的,底部是数据展示,当然了这将会使用到coordinatorLayout让中心菜单栏粘起来,具体看下面的代码吧。。。
xml文件代码
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:minHeight="15sp"
android:text="菜单栏"
android:textColor="#a4a"
android:textSize="28sp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我是哈哈哈"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
java代码如下
package com.example.coordinatorlayoutdemo;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;//头布局
private List<ImageView> list;//盛放ImageView的集合
private int[] a = new int[]{R.drawable.andriod, R.drawable.andriod0, R.drawable.andriod2, R.mipmap.ic_launcher};
private TextView tv;//数据列表
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = findViewById(R.id.viewpager);
tv = findViewById(R.id.tv);
initList();//初始化数据源
initVp();//初始化viewpager
initEvent();//初始化点击事件
}
private void initList() {
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 50; i++) {
sb.append("今天是第" + (i + 1) + "天\n");
}
String s = sb.toString();
tv.setText(s);
}
private void initVp() {
list = new ArrayList<>();
for (int i = 0; i < a.length; i++) {
View v = View.inflate(this, R.layout.item, null);
ImageView mimg = (ImageView) v.findViewById(R.id.img);
mimg.setImageResource(a[i]);
list.add(mimg);
}
MyAdapter adapter = new MyAdapter(list);
viewPager.setAdapter(adapter);
}
private void initEvent() {
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
viewPager滑动需要使用适配器代码如下
package com.example.coordinatorlayoutdemo;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.widget.ImageView;
import java.util.List;
/**
* Created by 亮亮 on 2018/3/27.
*/
public class MyAdapter extends PagerAdapter {
private List<ImageView> imgList;
public MyAdapter(List<ImageView> imgList){
this.imgList=imgList;
}
@Override
public int getCount() {
return imgList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
int p=position%imgList.size();
ImageView img=imgList.get(p);
ViewParent vp=img.getParent();
if(vp!=null){
ViewGroup parent=(ViewGroup) vp;
parent.removeView(img);
}
container.addView(imgList.get(p));
return imgList.get(p);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
int p=position%imgList.size();
container.removeView(imgList.get(p));
}
}
下面我们来看下效果吧:
有一个item布局没贴上,好了效果就是你滑动的时候中间的菜单栏可以粘起来是不是很low呢,哈哈哈哈,就这样吧!!!
上一篇: HTML5拖放API笔记
下一篇: Android中的菜单