Android滑动页碎片框架模板说明文档

Android滑动页+碎片框架模板第1阶段: 搭建基本视图框架导入jar包android-support-v4.jar添加图片title_option.png添加colors.xml<?xml version="1.0" encoding="utf-8"?><resources><color name="top_bg">#607d8b</color><color name="common_top_bar_normal">#607d8b</color><color name="common_top_bar_blue">#22292c</color><color name="btn_login_normal">#007086</color><color name="btn_login_pressed">#303744</color><color name="btn_logout_normal">#d33f3f</color><color name="btn_logout_pressed">#DA5A4D</color><color name="btn_register_normal">#2dafa3</color><color name="btn_register_pressed">#4ebcd3</color><color name="common_bottom_bar_normal_bg">#2d2f31</color><color name="common_bottom_bar_selected_bg">#161718</color><color name="common_botton_bar_blue">#2ea7e0</color><color name="common_bg">#fcfcfc</color><color name="btn_pressed_green_solid">#B6DA53</color><color name="divider_list">#cccccc</color><color name="top_bar_normal_bg">#4ebcd3</color><color name="bottom_bar_normal_bg">#2D2F31</color><color name="bottom_text_color_normal">#ffffff</color><color name="btn_white_normal">#f7f8f8</color><color name="btn_white_pressed">#b5b5b6</color><color name="btn_green_noraml">#68C270</color><color name="btn_green_pressed">#6FCD78</color><color name="btn_gray_normal">#c0c0c0</color><color name="btn_gray_pressed_status">#b5b5b6</color><color name="btn_gray_pressed">#666667</color><color name="btn_blue_normal">#1e90ff</color><color name="btn_blue_pressed">#0066FF</color><color name="orange">#FFA500</color><color name="gray_pressed">#b5b5b6</color><color name="gray_normal">#666667</color><color name="grid_state_pressed">#1Affffff</color><color name="grid_state_focused">#80000000</color><color name="voip_interface_text_color">#bababa</color><color name="black_deep">#FF000000</color></resources>activity_main.xml<LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="70dp"android:background="@color/btn_blue_normal"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:padding="10dp"android:layout_alignParentBottom="true"><TextViewandroid:id="@+id/tv_title"android:textSize="20sp"android:text="程序员▪干货"android:layout_centerInParent="true"android:textColor="#fff"android:layout_width="wrap_content"android:layout_height="wrap_content" /><ImageViewandroid:id="@+id/iv_add"android:layout_width="24dp"android:layout_height="24dp"android:src="@drawable/title_option"android:layout_alignParentRight="true"android:layout_centerVertical="true"/></RelativeLayout></RelativeLayout><!-- 标签页--><LinearLayoutandroid:id="@+id/id_ly_bottombar"android:layout_width="fill_parent"android:layout_height="40dp"android:orientation="horizontal"android:background="#fff"><RelativeLayoutandroid:id="@+id/btn1"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:background="#fff"><TextViewandroid:id="@+id/txt1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="妹纸"android:layout_centerInParent="true"android:textColor="#607d8b"android:textSize="18sp"/><RelativeLayoutandroid:id="@+id/line1"android:layout_height="2dp"/></RelativeLayout><RelativeLayoutandroid:id="@+id/btn2"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:background="#fff"><TextViewandroid:id="@+id/txt2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="干货"android:layout_centerInParent="true"android:textColor="#607d8b"android:textSize="18sp"/><RelativeLayoutandroid:id="@+id/line2"android:layout_alignParentBottom="true"android:background="@color/btn_blue_normal"android:layout_width="match_parent"android:layout_height="2dp"/></RelativeLayout><RelativeLayoutandroid:id="@+id/btn3"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:background="#fff"><TextViewandroid:id="@+id/txt3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="收藏"android:layout_centerInParent="true"android:textColor="#607d8b"android:textSize="18sp"/><RelativeLayoutandroid:id="@+id/line3"android:layout_height="2dp"/></RelativeLayout><RelativeLayoutandroid:id="@+id/btn4"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"android:background="#fff"><TextViewandroid:id="@+id/txt4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="设置"android:layout_centerInParent="true"android:textColor="#607d8b"android:textSize="18sp"/><RelativeLayoutandroid:id="@+id/line4"android:layout_alignParentBottom="true"android:background="@color/btn_blue_normal"android:layout_width="match_parent"android:layout_height="2dp"/></RelativeLayout></LinearLayout><!-- 切换Fragment的地方--><LinearLayoutandroid:id="@+id/id_content"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_below="@id/id_ly_bottombar"android:orientation="horizontal" ><android.support.v4.view.ViewPagerandroid:id="@+id/vp"android:layout_width="match_parent"android:layout_height="match_parent"android:flipInterval="3000"android:persistentDrawingCache="animation" /></LinearLayout></LinearLayout>MainActivitypackage com.spl.viewpagerfragmentset;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.view.View;import android.view.Window;import android.view.WindowManager;import android.widget.RelativeLayout;import android.widget.TextView;/*** 主界面:ViewPager的容器*/public class MainActivity extends FragmentActivityimplements View.OnClickListener, ViewPager.OnPageChangeListener {// 按钮数组private RelativeLayout[] arrBtn = new RelativeLayout[4];// 标签文字数组private TextView[] arrTxt = new TextView[4];// 标签下划线(Indicator)private RelativeLayout[] arrLine = new RelativeLayout[4];// 滑动页容器private ViewPager viewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 去标题requestWindowFeature(Window.FEATURE_NO_TITLE);//透明状态栏(沉浸式)getWindow().addFlags(youtParams.FLAG_TRANSLUCENT_STATUS);//透明导航栏(沉浸式)getWindow().addFlags(youtParams.FLAG_TRANSLUCENT_NA VIGATION);setContentView(yout.activity_main);initView();initData();initListener();viewPager.setCurrentItem(0);setColor(0);}private void initView() {// 初始化下划线(逐帧动画)String packageName = getApplicationContext().getPackageName();//获取当前包名for (int i = 0; i < 4; i++) {//从图片名称反射资源ID R.id.line1int id = this.getResources().getIdentifier("line" + (i + 1), "id", packageName);arrLine[i] = (RelativeLayout) findViewById(id);int id2 = this.getResources().getIdentifier("btn" + (i + 1), "id", packageName);arrBtn[i] =(RelativeLayout) findViewById(id2);int id3 = this.getResources().getIdentifier("txt" + (i + 1), "id", packageName);arrTxt[i] = (TextView) findViewById(id3);}// 获取ViewPager对象viewPager = (ViewPager) findViewById(R.id.vp);}private void initData() {}private void initListener() {// 添加按钮的监听for (int i = 0; i < arrBtn.length; i++) {arrBtn[i].setOnClickListener(this);}// 添加滑动页的监听viewPager.setOnPageChangeListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btn1:viewPager.setCurrentItem(0);// 第一页break;case R.id.btn2:viewPager.setCurrentItem(1);// 第二页break;case R.id.btn3:viewPager.setCurrentItem(2);// 第二页break;case R.id.btn4:viewPager.setCurrentItem(3);// 第二页break;default:break;}}/*** 1.将所有的背景统一颜色* 2.将当前选中的背景设置特殊颜色* @param index*/public void setColor(int index){// "所有人"都回复最初的状态for (int i = 0; i<arrBtn.length; i++){arrLine[i].setBackgroundColor(Color.WHITE);arrTxt[i].setTextColor(getResources().getColor(mon_top_bar_normal));}arrLine[index].setBackgroundColor(getResources().getColor(R.color.btn_blue_normal));// 特殊arrTxt[index].setTextColor(getResources().getColor(R.color.btn_blue_normal));}@Overridepublic void onPageScrolled(int i, float v, int i2) {// 滑动过程中...(写动画)}@Overridepublic void onPageSelected(int i) {// 核心事件setColor(i);}@Overridepublic void onPageScrollStateChanged(int i) {// 滑动的状态改变}}本阶段完成效果图第2阶段:添加碎片Cons.java/*** 常量类on 2016/7/27.*/public class Cons {public static final String[] Tab_Name = {"妹子","干货","收藏","设置"};public static final String Key_Fragment = "Key_Fragment";}fragment_base.xml(碎片布局)<RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools" android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><TextViewandroid:id="@+id/title"android:text="设置"android:textSize="28sp"android:layout_centerInParent="true"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RelativeLayout>BaseFragment(碎片基类)import android.support.v4.app.Fragment;import youtInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import com.spl.viewpagerfragmentset.Cons;import com.spl.viewpagerfragmentset.R;/*** Created by on 2016/7/27.*/public class BaseFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {// 反射视图View view = inflater.inflate(yout.fragment_base, container, false);// 获取参数值Bundle b = getArguments();String key = b.getString(Cons.Key_Fragment);TextView title = (TextView) view.findViewById(R.id.title);title.setText(key);return view;}}MyFragmentAdapaterpackage com.spl.viewpagerfragmentset.adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import com.spl.viewpagerfragmentset.fragment.BaseFragment;import java.util.List;/*** 碎片适配器* Created on 2016/7/7.*/public class MyFragmentAdapater extends FragmentPagerAdapter {public void setFragments(List<BaseFragment> fragments) { this.fragments = fragments;}// 碎片集合private List<BaseFragment> fragments;/*** 构造器* @param fm 碎片管理者对象*/public MyFragmentAdapater(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int i) {return fragments.get(i);// 返回当前碎片元素}@Overridepublic int getCount() {return fragments.size();// 返回集合大小}}Managerpackage com.spl.viewpagerfragmentset;import android.app.Activity;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import com.spl.viewpagerfragmentset.adapter.MyFragmentAdapater; import com.spl.viewpagerfragmentset.fragment.BaseFragment;import java.util.ArrayList;import java.util.List;/*** 管理对碎片的生成,传参和加载* Created by on 2016/7/27.*/public class Manager {Activity context;public Manager(Activity context){this.context = context;}// 碎片集合private List<BaseFragment> fragments;// 碎片适配器private MyFragmentAdapater adapter;public void initData(ViewPager viewPager) {// 准备碎片fragments = new ArrayList<BaseFragment>();fragments.add(new BaseFragment());fragments.add(new BaseFragment());fragments.add(new BaseFragment());fragments.add(new BaseFragment());for (int i = 0; i< fragments.size(); i++){Bundle b = new Bundle();b.putString(Cons.Key_Fragment,Cons.Tab_Name[i]);fragments.get(i).setArguments(b);}// 实例化适配器adapter = new MyFragmentAdapater(((FragmentActivity)context).getSupportFragmentManager());adapter.setFragments(fragments);// 添加数据viewPager.setAdapter(adapter);// 关联适配器}}MainActivity中修改// 管理者Manager manager;manager = new Manager(this);initView();initData();initListener();private void initData() {manager.initData(viewPager);}本阶段完成效果图第3阶段自定义颜色MainActivity中修改package com.spl.viewpagerfragmentset;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.view.View;import android.view.Window;import android.view.WindowManager;import android.widget.RelativeLayout;import android.widget.TextView;/*** 主界面:ViewPager的容器*/public class MainActivity extends FragmentActivityimplements View.OnClickListener, ViewPager.OnPageChangeListener {// 按钮数组private RelativeLayout[] arrBtn = new RelativeLayout[4];// 标签文字数组private TextView[] arrTxt = new TextView[4];// 标签下划线(Indicator)private RelativeLayout[] arrLine = new RelativeLayout[4];// 滑动页容器private ViewPager viewPager;// 顶部栏(包含沉浸到状态栏的部分)RelativeLayout topbar;// 选中的标签颜色int color_selected = R.color.btn_blue_normal;// 未选中的标签颜色int color_unselected = mon_top_bar_normal;// 顶部栏颜色int color_topbar = R.color.btn_blue_normal;// 管理者Manager manager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 去标题requestWindowFeature(Window.FEATURE_NO_TITLE);//透明状态栏(沉浸式)getWindow().addFlags(youtParams.FLAG_TRANSLUCENT_STATUS);//透明导航栏(沉浸式)getWindow().addFlags(youtParams.FLAG_TRANSLUCENT_NA VIGATION);setContentView(yout.activity_main);manager = new Manager(this);initStyle();initView();initData();initListener();viewPager.setCurrentItem(0);setColor(0);}// 改变颜色private void initStyle() {color_topbar = R.color.orange;color_selected = R.color.orange;}private void initView() {topbar = (RelativeLayout) findViewById(R.id.topbar);topbar.setBackgroundColor(getResources().getColor(color_topbar));}/*** 1.将所有的背景统一颜色* 2.将当前选中的背景设置特殊颜色* @param index*/public void setColor(int index){// "所有人"都回复最初的状态for (int i = 0; i<arrBtn.length; i++){arrLine[i].setBackgroundColor(Color.WHITE);arrTxt[i].setTextColor(getResources().getColor(color_unselected));}arrLine[index].setBackgroundColor(getResources().getColor(color_selected));// 特殊arrTxt[index].setTextColor(getResources().getColor(color_selected));}}本阶段完成效果图。