社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
from: http://blog.csdn.net/wei_zhi/article/details/50609119
使用ViewPager+Fragment实现页面点击切换和手势滑动，效果图如下：
源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590
布局文件activity_main.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="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="@dimen/top_tab_height"
android:background="@color/main_top_color" >
<TextView
android:id="@+id/picture_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/picture"
android:textStyle="bold"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size" />
<TextView
android:id="@+id/movie_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/movie"
android:textStyle="bold"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size" />
<TextView
android:id="@+id/music_text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/music"
android:textStyle="bold"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/main_line_height"
android:layout_gravity="bottom"
android:orientation="vertical"
android:background="@color/main_top_color"
>
<ImageView
android:id="@+id/cursor"
android:layout_width="@dimen/main_matrix_width"
android:layout_height="@dimen/main_line_height"
android:scaleType="matrix"
android:src="@color/matrix_color" />
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0.5dp"
android:background="@color/main_top_color"/>
<android.support.v4.view.ViewPager
android:id="@+id/vPager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1.0"
android:background="@color/white"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>
其中strings.xml为：
<resources>
<string name="app_name">VF</string>
<string name="action_settings">Settings</string>
<string name="picture">图片</string>
<string name="movie">电影</string>
<string name="music">音乐</string>
</resources>
dimens.xml为：
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>
<dimen name="top_tab_height">50dp</dimen>
<dimen name="main_top_tab_text_size">14sp</dimen> <!--48px-->
<dimen name="main_line_height">2.7dp</dimen><!--8px-->
<dimen name="main_matrix_width">95dp</dimen>
<dimen name="text_size">32sp</dimen>
</resources>
colors.xml为：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="transparent">#00000000</color>
<color name="main_top_color">#f7614d</color>
<color name="main_top_tab_color">#fcc9c5</color>
<color name="main_top_tab_color_2">#ffffff</color>
<color name="matrix_color">#ffffff</color>
<color name="white">#ffffff</color>
<color name="red">#FFFF1826</color>
</resources>
MainActivity.Java 如下：
package com.android.vf;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
/**
* 主界面显示，包括图片、电影和音乐三个选项
* @author weizhi
* @version 1.0
*/
public class MainActivity extends FragmentActivity {
//图片
private TextView pictureTextView;
//电影
private TextView movieTextView;
//音乐
private TextView musicTextView;
//实现Tab滑动效果
private ViewPager mViewPager;
//动画图片
private ImageView cursor;
//动画图片偏移量
private int offset = 0;
private int position_one;
private int position_two;
//动画图片宽度
private int bmpW;
//当前页卡编号
private int currIndex = 0;
//存放Fragment
private ArrayList<Fragment> fragmentArrayList;
//管理Fragment
private FragmentManager fragmentManager;
public Context context;
public static final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context = this;
//初始化TextView
InitTextView();
//初始化ImageView
InitImageView();
//初始化Fragment
InitFragment();
//初始化ViewPager
InitViewPager();
}
@Override
public View onCreateView(String name, Context context, AttributeSet attrs) {
return super.onCreateView(name, context, attrs);
}
@Override
protected void onResume() {
/**
* 设置为竖屏
*/
if(getRequestedOrientation()!= ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
super.onResume();
}
/**
* 初始化头标
*/
private void InitTextView(){
//图片头标
pictureTextView = (TextView)findViewById(R.id.picture_text);
//电影头标
movieTextView = (TextView) findViewById(R.id.movie_text);
//音乐头标
musicTextView = (TextView)findViewById(R.id.music_text);
//添加点击事件
pictureTextView.setOnClickListener(new MyOnClickListener(0));
movieTextView.setOnClickListener(new MyOnClickListener(1));
musicTextView.setOnClickListener(new MyOnClickListener(2));
}
/**
* 初始化页卡内容区
*/
private void InitViewPager() {
mViewPager = (ViewPager) findViewById(R.id.vPager);
mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));
//让ViewPager缓存2个页面
mViewPager.setOffscreenPageLimit(2);
//设置默认打开第一页
mViewPager.setCurrentItem(0);
//将顶部文字恢复默认值
resetTextViewTextColor();
pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
//设置viewpager页面滑动监听事件
mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
}
/**
* 初始化动画
*/
private void InitImageView() {
cursor = (ImageView) findViewById(R.id.cursor);
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
// 获取分辨率宽度
int screenW = dm.widthPixels;
bmpW = (screenW/3);
//设置动画图片宽度
setBmpW(cursor, bmpW);
offset = 0;
//动画图片偏移量赋值
position_one = (int) (screenW / 3.0);
position_two = position_one * 2
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
