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

Android滑动页+碎片框架模板第1阶段: 搭建基本视图框架

导入jar包

android-support-v4.jar

添加图片

title_option.png

添加colors.xml

#607d8b

#607d8b

#22292c

#007086

#303744

#d33f3f

#DA5A4D

#2dafa3

#4ebcd3

#2d2f31

#161718

#2ea7e0

#fcfcfc

#B6DA53

#cccccc

#4ebcd3

#2D2F31

#ffffff

#f7f8f8

#b5b5b6

#68C270

#6FCD78

#c0c0c0

#b5b5b6

#666667

#1e90ff

#0066FF

#FFA500

#b5b5b6

#666667

#1Affffff

#80000000

#bababa

#FF000000

activity_main.xml

xmlns:tools="https://www.doczj.com/doc/879972002.html,/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="70dp"

android:background="@color/btn_blue_normal">

android:layout_width="match_parent"

android:layout_height="50dp"

android:padding="10dp"

android:layout_alignParentBottom="true">

android: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" />

android: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"

/>

android:id="@+id/id_ly_bottombar"

android:layout_width="fill_parent"

android:layout_height="40dp"

android:orientation="horizontal"

android:background="#fff">

android:id="@+id/btn1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1"

android:background="#fff"

>

android: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"

/>

android:id="@+id/line1"

android:layout_height="2dp"/>

android:id="@+id/btn2"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1"

android:background="#fff"

>

android: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"

/>

android:id="@+id/line2"

android:layout_alignParentBottom="true"

android:background="@color/btn_blue_normal"

android:layout_width="match_parent"

android:layout_height="2dp"/>

android:id="@+id/btn3"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1"

android:background="#fff"

>

android: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"

/>

android:id="@+id/line3"

android:layout_height="2dp"/>

android:id="@+id/btn4"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1"

android:background="#fff"

>

android: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"

/>

android:id="@+id/line4"

android:layout_alignParentBottom="true"

android:background="@color/btn_blue_normal"

android:layout_width="match_parent"

android:layout_height="2dp"/>

android: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:id="@+id/vp"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:flipInterval="3000"

android:persistentDrawingCache="animation" />

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 FragmentActivity

implements 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;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// 去标题

requestWindowFeature(Window.FEATURE_NO_TITLE);

//透明状态栏(沉浸式)

getWindow().addFlags(https://www.doczj.com/doc/879972002.html,youtParams.FLAG_TRANSLUCENT_STATUS);

//透明导航栏(沉浸式)

getWindow().addFlags(https://www.doczj.com/doc/879972002.html,youtParams.FLAG_TRANSLUCENT_NA VIGATION);

setContentView(https://www.doczj.com/doc/879972002.html,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.line1

int 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);

}

@Override

public 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

arrLine[i].setBackgroundColor(Color.WHITE);

arrTxt[i].setTextColor(getResources().getColor(https://www.doczj.com/doc/879972002.html,mon_top_bar_normal));

}

arrLine[index].setBackgroundColor(getResources().getColor(R.color.btn_blue_normal));// 特殊arrTxt[index].setTextColor(getResources().getColor(R.color.btn_blue_normal));

}

@Override

public void onPageScrolled(int i, float v, int i2) {

// 滑动过程中...(写动画)

}

@Override

public void onPageSelected(int i) {// 核心事件

setColor(i);

}

@Override

public 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(碎片布局)

xmlns:tools="https://www.doczj.com/doc/879972002.html,/tools" android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:id="@+id/title"

android:text="设置"

android:textSize="28sp"

android:layout_centerInParent="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

BaseFragment(碎片基类)

import android.support.v4.app.Fragment;

import https://www.doczj.com/doc/879972002.html,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 {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

// 反射视图

View view = inflater.inflate(https://www.doczj.com/doc/879972002.html,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;

}

}

MyFragmentAdapater

package 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 fragments) { this.fragments = fragments;

}

// 碎片集合

private List fragments;

/**

* 构造器

* @param fm 碎片管理者对象

*/

public MyFragmentAdapater(FragmentManager fm) {

super(fm);

}

@Override

public Fragment getItem(int i) {

return fragments.get(i);// 返回当前碎片元素

}

@Override

public int getCount() {

return fragments.size();// 返回集合大小

}

}

Manager

package 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 fragments;

// 碎片适配器

private MyFragmentAdapater adapter;

public void initData(ViewPager viewPager) {

// 准备碎片

fragments = new ArrayList();

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 FragmentActivity

implements 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 = https://www.doczj.com/doc/879972002.html,mon_top_bar_normal;

// 顶部栏颜色

int color_topbar = R.color.btn_blue_normal;

// 管理者

Manager manager;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// 去标题

//透明状态栏(沉浸式)

getWindow().addFlags(https://www.doczj.com/doc/879972002.html,youtParams.FLAG_TRANSLUCENT_STATUS);

//透明导航栏(沉浸式)

getWindow().addFlags(https://www.doczj.com/doc/879972002.html,youtParams.FLAG_TRANSLUCENT_NA VIGATION);

setContentView(https://www.doczj.com/doc/879972002.html,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

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));

}

}

本阶段完成效果图