viewPager+fragment的组合使用,可以达到一个非常不错的效果。下面这个功能是模仿微信的,先上页面布局。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<View
android:layout_width="match_parent"
android:layout_height="0.1dp"
android:background="@color/material_blue_grey_800" />
<include layout="@layout/base_bottom_layout" />
</LinearLayout>
主界面主要有一个viewpager和include一个底部控件。
base_bottom_layout.xml 的页面布局如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dp"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/linLayout_tab_home"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/imgBtn_tab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/base_bottombar_home_unselect" />
<TextView
android:id="@+id/txt_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textColor="@color/material_blue_grey_800" />
</LinearLayout>
<LinearLayout
android:id="@+id/linLayout_tab_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/imgBtn_tab_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/base_bottombar_type_unselect" />
<TextView
android:id="@+id/txt_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="商品分类"
android:textColor="@color/material_blue_grey_800" />
</LinearLayout>
<LinearLayout
android:id="@+id/linLayout_tab_car"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/imgBtn_tab_car"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/base_bottombar_car_unselect" />
<TextView
android:id="@+id/txt_car"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="购物车"
android:textColor="@color/material_blue_grey_800" />
</LinearLayout>
<LinearLayout
android:id="@+id/linLayout_tab_mine"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/imgBtn_tab_mine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/base_bottombar_mine_unselect" />
<TextView
android:id="@+id/txt_mine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="个人中心"
android:textColor="@color/material_blue_grey_800" />
</LinearLayout>
</LinearLayout>
主界面嵌套了4个页面,分别对应首页,商品分类,购物车和个人中心的四个页面。主界面代码如下:
package com.example.wmk.activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.example.wmk.R;
import com.example.wmk.fragment.CarFragment;
import com.example.wmk.fragment.HomeFragment;
import com.example.wmk.fragment.MineFragment;
import com.example.wmk.fragment.TypeFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends FragmentActivity implements View.OnClickListener {
//LinearLayout
/**
* 首页
*/
private LinearLayout linLayoutTabHome = null;
/**
* 商品分类
*/
private LinearLayout linLayoutTabType = null;
/**
* 购物车
*/
private LinearLayout linLayoutTabCar = null;
/**
* 个人中心
*/
private LinearLayout linLayoutTabMine = null;
//ImageButton
/**
* 首页
*/
private ImageButton imgBtnTabHome = null;
/**
* 商品分类
*/
private ImageButton imgBtnTabType = null;
/**
* 购物车
*/
private ImageButton imgBtnTabCar = null;
/**
* 个人中心
*/
private ImageButton imgBtnTabMine = null;
//TextView
/**
* 首页
*/
private TextView txtHome = null;
/**
* 商品分类
*/
private TextView txtType = null;
/**
* 购物车
*/
private TextView txtCar = null;
/**
* 个人中心
*/
private TextView txtMine = null;
/**
* ViewPager
*/
private ViewPager mviewPager = null;
//装载Fragment的集合
private List<Fragment> mFragments;
//适配器
private FragmentPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//初始化控件
initViews();
//初始化事件
initEvents();
//初始化数据
initDatas();
//默认
selectTab(0);
}
private void initViews() {
linLayoutTabHome = (LinearLayout) findViewById(R.id.linLayout_tab_home);
linLayoutTabType = (LinearLayout) findViewById(R.id.linLayout_tab_type);
linLayoutTabCar = (LinearLayout) findViewById(R.id.linLayout_tab_car);
linLayoutTabMine = (LinearLayout) findViewById(R.id.linLayout_tab_mine);
imgBtnTabHome = (ImageButton) findViewById(R.id.imgBtn_tab_home);
imgBtnTabType = (ImageButton) findViewById(R.id.imgBtn_tab_type);
imgBtnTabCar = (ImageButton) findViewById(R.id.imgBtn_tab_car);
imgBtnTabMine = (ImageButton) findViewById(R.id.imgBtn_tab_mine);
txtHome = (TextView) findViewById(R.id.txt_home);
txtType = (TextView) findViewById(R.id.txt_type);
txtCar = (TextView) findViewById(R.id.txt_car);
txtMine = (TextView) findViewById(R.id.txt_mine);
mviewPager = (ViewPager) findViewById(R.id.view_pager);
}
private void initEvents() {
linLayoutTabHome.setOnClickListener(this);
linLayoutTabType.setOnClickListener(this);
linLayoutTabCar.setOnClickListener(this);
linLayoutTabMine.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.linLayout_tab_home:
selectTab(0);
break;
case R.id.linLayout_tab_type:
selectTab(1);
break;
case R.id.linLayout_tab_car:
selectTab(2);
break;
case R.id.linLayout_tab_mine:
selectTab(3);
break;
}
}
private void selectTab(int i) {
//清空上次选中状态
reset();
//根据点击的Tab设置对应的ImageButton为橘黄色
switch (i) {
case 0:
imgBtnTabHome.setImageResource(R.mipmap.base_bottombar_home_select);
txtHome.setTextColor(Color.parseColor("#f6694a"));
break;
case 1:
imgBtnTabType.setImageResource(R.mipmap.base_bottombar_type_select);
txtType.setTextColor(Color.parseColor("#f6694a"));
break;
case 2:
imgBtnTabCar.setImageResource(R.mipmap.base_bottombar_car_select);
txtCar.setTextColor(Color.parseColor("#f6694a"));
break;
case 3:
imgBtnTabMine.setImageResource(R.mipmap.base_bottombar_mine_select);
txtMine.setTextColor(Color.parseColor("#f6694a"));
break;
}
//设置当前点击的Tab所对应的页面
mviewPager.setCurrentItem(i);
}
private void reset() {
imgBtnTabHome.setImageResource(R.mipmap.base_bottombar_home_unselect);
imgBtnTabType.setImageResource(R.mipmap.base_bottombar_type_unselect);
imgBtnTabCar.setImageResource(R.mipmap.base_bottombar_car_unselect);
imgBtnTabMine.setImageResource(R.mipmap.base_bottombar_mine_unselect);
txtHome.setTextColor(Color.parseColor("#ff37474f"));
txtType.setTextColor(Color.parseColor("#ff37474f"));
txtCar.setTextColor(Color.parseColor("#ff37474f"));
txtMine.setTextColor(Color.parseColor("#ff37474f"));
}
private void initDatas() {
mFragments = new ArrayList<Fragment>();
mFragments.add(new HomeFragment());
mFragments.add(new TypeFragment());
mFragments.add(new CarFragment());
mFragments.add(new MineFragment());
//初始化适配器
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {//从集合中获取对应位置的Fragment
return mFragments.get(position);
}
@Override
public int getCount() {//获取集合中Fragment的总数
return mFragments.size();
}
};
//不要忘记设置ViewPager的适配器
mviewPager.setAdapter(mAdapter);
//设置ViewPager的切换监听
mviewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
//页面滚动事件
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//页面选中事件
@Override
public void onPageSelected(int position) {
//设置position对应的集合中的Fragment
mviewPager.setCurrentItem(position);
reset();
selectTab(position);
}
@Override
//页面滚动状态改变事件
public void onPageScrollStateChanged(int state) {
}
});
}
}
这样就实现了,微信侧滑和底部点击的效果。