前端时间自己做了个滑动页面,现在分享一下,做得比较粗陋,一步一步来。
一.准备布局文件:
(1)activity_my_view.xml:Activity的布局,其中重点是一个包含menu_list.xml的layout
<?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="match_parent">
<TextView
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="滑动页面"/>
<include layout="@layout/menu_list"/>
<View
android:background="#3fc285"
android:layout_width="match_parent"
android:layout_height="5dp" />
</LinearLayout>
(2)menu_list.xml:包含ViewPage和一个用于小圆点的layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffc8c8"
android:id="@+id/test_layout">
<android.support.v4.view.ViewPager
android:id="@+id/add_list_viewpager"
android:layout_width="match_parent"
android:layout_height="220dp">
</android.support.v4.view.ViewPager>
<!--下面放小圆点-->
<LinearLayout
android:background="#ffffff"
android:orientation="horizontal"
android:layout_below="@+id/add_list_viewpager"
android:id="@+id/image_view_layout"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="20dp">
</LinearLayout>
</RelativeLayout>
(3)page_container.xml:每个ViewPage页面打算用一个RecyclerView来放一些按钮,这个布局将在代码中动态添加
<?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="match_parent"
android:background="#ffffff">
<FrameLayout
android:paddingTop="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/list_item_oa_operation_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"/>
</FrameLayout>
</LinearLayout>
(4)list_item_opt.xml:放每个item的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/layout_item"
android:gravity="center_horizontal">
<TextView
android:background="@drawable/button_shape"
android:id="@+id/tv_plan_class"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:text="test"
android:textSize="18sp"
android:textColor="#666666"
android:layout_margin="10dp"/>
</LinearLayout>
二、准备drawable文件
(1)button_shape.xml,button_shape2.xml,button_shape3.xml:这三个文件只是颜色设置不一样,非点击时的效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--渐变-->
<gradient
android:startColor = "#d0ffde"
android:endColor = "#50ff84"
android:angle = "0"
android:type="linear"
/>
<corners android:radius="58dp"/>
</shape>
(2)button_shape_pressed.xml,button_shape_pressed2.xml,button_shape_pressed3.xml:点击时的效果
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--渐变-->
<gradient
android:startColor = "#50ff84"
android:endColor = "#d0ffde"
android:angle = "0"
android:type="linear"
/>
<corners android:radius="28dp"/>
</shape>
(3)selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_shape_pressed" android:state_pressed="true"/>
<item android:drawable="@drawable/button_shape"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_shape_pressed2" android:state_pressed="true"/>
<item android:drawable="@drawable/button_shape2"/>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/button_shape_pressed3" android:state_pressed="true"/>
<item android:drawable="@drawable/button_shape3"/>
</selector>
三、MyViewActivity:这里只给出主要代码,一个初始化View的方法,两个适配器方法
//ViewPage
private ViewPager viewPager;
private ArrayList<View> pageViews;
// 包裹小圆点的LinearLayout
private ImageView imageView;
private ImageView[] imageViews;
private LinearLayout group;
private void initPageView(){
pageViews = new ArrayList<View>();
//pageView的内容
LayoutInflater inflater = getLayoutInflater();
pageViews = new ArrayList<View>();
View pageView1 = inflater.inflate(R.layout.page_container,null);
RecyclerView recyclerView1 = (RecyclerView) pageView1.findViewById(R.id.list_item_oa_operation_show);
View pageView2 = inflater.inflate(R.layout.page_container,null);
RecyclerView recyclerView2 = (RecyclerView) pageView2.findViewById(R.id.list_item_oa_operation_show);
View pageView3 = inflater.inflate(R.layout.page_container,null);
RecyclerView recyclerView3 = (RecyclerView) pageView3.findViewById(R.id.list_item_oa_operation_show);
//设置管理器
recyclerView1.setLayoutManager(new GridLayoutManager(this,3));
recyclerView2.setLayoutManager(new GridLayoutManager(this,3));
recyclerView3.setLayoutManager(new GridLayoutManager(this,3));
WindowManager manager = MyViewActivity.this.getWindowManager();
DisplayMetrics outMetrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(outMetrics);
int width = outMetrics.widthPixels;
int mSingleItemWidth = width/3;
//初始化适配器内容
MobileOAItemListAdapter adapter1 = new MobileOAItemListAdapter(this,new String[]{"a1","a2","a3","a4","a5","a6"},R.drawable.button_selector,mSingleItemWidth);
recyclerView1.setAdapter(adapter1);
MobileOAItemListAdapter adapter2 = new MobileOAItemListAdapter(this,new String[]{"b1","b2","b3","b4","b5","b6"},R.drawable.button_selector2,mSingleItemWidth);
recyclerView2.setAdapter(adapter2);
MobileOAItemListAdapter adapter3 = new MobileOAItemListAdapter(this,new String[]{"c1","c2","c3","c4","c5","c6"},R.drawable.button_selector3,mSingleItemWidth);
recyclerView3.setAdapter(adapter3);
//
pageViews.add(pageView1);
pageViews.add(pageView2);
pageViews.add(pageView3);
//小圆点数
imageViews = new ImageView[pageViews.size()];
//小圆点
group = (LinearLayout)findViewById(R.id.image_view_layout) ;
//包裹的viewPager容器
viewPager = (ViewPager)findViewById(R.id.add_list_viewpager);
for(int i = 0;i < imageViews.length ;i++){
imageView = new ImageView(this);
imageViews[i] = imageView;
if(i == 0){
imageViews[i].setBackgroundResource(R.drawable.my_ellipse_s);
}else {
imageViews[i].setBackgroundResource(R.drawable.my_ellipse_not_s);
}
group.addView(imageViews[i]);
ViewGroup.MarginLayoutParams paramTest2 = (ViewGroup.MarginLayoutParams) imageViews[i].getLayoutParams();
paramTest2.setMargins(0, 0, 12, 0);
imageViews[i].requestLayout();
}
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for(int i =0;i<imageViews.length;i++){
if(i == position){
imageViews[i].setBackgroundResource(R.drawable.my_ellipse_s);
}else {
imageViews[i].setBackgroundResource(R.drawable.my_ellipse_not_s);
}
ViewGroup.MarginLayoutParams paramTest2 = (ViewGroup.MarginLayoutParams) imageViews[i].getLayoutParams();
paramTest2.setMargins(0, 0, 12, 0);
imageViews[i].requestLayout();
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
viewPager.setAdapter(new GuidePageAdapter(pageViews));
}
// 指引页面数据适配器
class GuidePageAdapter extends PagerAdapter {
ArrayList<View> mPageViews;
public GuidePageAdapter(ArrayList<View> pageViews){
mPageViews = pageViews;
}
@Override
public int getCount() {
return mPageViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
// TODO Auto-generated method stub
((ViewPager) arg0).removeView(mPageViews.get(arg1));
}
@Override
public Object instantiateItem(View arg0, int arg1) {
// TODO Auto-generated method stub
((ViewPager) arg0).addView(mPageViews.get(arg1));
return mPageViews.get(arg1);
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO Auto-generated method stub
}
@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
return null;
}
@Override
public void startUpdate(View arg0) {
// TODO Auto-generated method stub
}
@Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub
}
}
//Recycler的适配器
static class MobileOAItemListAdapter extends RecyclerView.Adapter {
private Context mContext;
private String[] mStrings;
private int mSingleItemWidth;
private int mDrawable;
public MobileOAItemListAdapter(Context context, String[] strings,int drawable,int w) {
mContext = context;
mStrings = strings;
mDrawable = drawable;
mSingleItemWidth = w;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return DisplayHolder.newHolder(parent, mContext);
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
DisplayHolder lHolder = (DisplayHolder) holder;
//设置值
// ViewGroup.LayoutParams layoutParams = lHolder.layout_item.getLayoutParams();
lHolder.layout_item.setMinimumWidth(mSingleItemWidth);
lHolder.tv_plan_class.setBackgroundResource(mDrawable);
if (!TextUtils.isEmpty(mStrings[position])) {
lHolder.tv_plan_class.setText(mStrings[position]);
}
lHolder.tv_plan_class.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext,"click = "+mStrings[position],Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return mStrings.length;
}
private static class DisplayHolder extends RecyclerView.ViewHolder {
TextView tv_plan_class;
LinearLayout layout_item;
public DisplayHolder(Context context, View itemView) {
super(itemView);
tv_plan_class = (TextView)itemView.findViewById(R.id.tv_plan_class);
layout_item = (LinearLayout)itemView.findViewById(R.id.layout_item);
}
private static DisplayHolder newHolder(ViewGroup parent, Context context) {
View view = LayoutInflater.from(context).inflate(R.layout.list_item_opr, parent, false);
return new DisplayHolder(context, view);
}
}
}
以上就是核心的代码了,后面再补截图。