您的位置:首页 > 其它

ViewPager+Fragment实现页面点击切换和手势滑动

2018-03-07 15:45 639 查看
项目Git地址:https://github.com/lantian0314/ndkDemo
一、项目运行的界面效果







第二、项目的layout布局
    2.1 fragement_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">

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

<View
android:layout_width="fill_parent"
android:layout_height="0.5dp"
android:background="@color/blue" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/main_line_height"
android:layout_gravity="bottom"
android:background="@color/blue"
android:orientation="vertical">

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

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="@dimen/top_tab_height"
android:background="@color/blue">

<TextView
android:onClick="txtClick"
android:id="@+id/txt_message"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/message"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size"
android:textStyle="bold" />

<TextView
android:onClick="txtClick"
android:id="@+id/txt_contact"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/contact"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size"
android:textStyle="bold" />

<TextView
android:onClick="txtClick"
android:id="@+id/txt_dynamic"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="@string/dynamic"
android:textColor="@color/main_top_tab_color"
android:textSize="@dimen/main_top_tab_text_size"
android:textStyle="bold" />
</LinearLayout>

</LinearLayout>
     2.2 fragment_message.xml<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@drawable/dotshape"/>
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/message"
android:textSize="@dimen/text_size"
android:textColor="@color/blue"/>
</FrameLayout >  第三、Value文件夹
    3.1string<resources>
<string name="app_name">ndkDemo</string>
<string name="action_settings">Settings</string>
<string name="message">消息</string>
<string name="contact">联系人</string>
<string name="dynamic">动态</string>
</resources>     3.2 dimens<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>     3.3  color<?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">#000000</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>
<color name="blue">#0000ff</color>
</resources>
 第四 、drawable
    4.1 dotshape.xml<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="false">
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="@color/blue" />
<size
android:width="4dp"
android:height="4dp" />
</shape>第五、Activity
   5.1 FragmentMainActivitypackage orm.ndkdemo.Fragment;

import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import orm.ndkdemo.R;

/**
* Created by xingyatong on 2018/3/6.
*/
public class FragmentMainActivity extends AppCompatActivity {

//消息
@BindView(R.id.txt_message)
TextView txt_message;
//联系人
@BindView(R.id.txt_contact)
TextView txt_contact;
//动态
@BindView(R.id.txt_dynamic)
TextView txt_dynamic;
//实现Tab滑动效果
@BindView(R.id.vPager)
ViewPager mViewPager;

//动画图片
@BindView(R.id.cursor)
ImageView cursor;

//动画图片偏移量
private int offset = 0;
4000

private int position_one;
private int position_two;

//当前页卡编号
private int currIndex = 0;

//存放Fragment
private ArrayList<Fragment> fragmentArrayList;

//管理Fragment
private FragmentManager fragmentManager;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_main);
ButterKnife.bind(this);

//初始化ImageView
InitImageView();
//初始化Fragment
InitFragment();
//初始化ViewPager
InitViewPager();
}

/**
* 初始化页卡内容区
*/
private void InitViewPager() {
mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList));

//让ViewPager缓存2个页面
mViewPager.setOffscreenPageLimit(2);

//设置默认打开第一页
mViewPager.setCurrentItem(0);

//将顶部文字恢复默认值
resetTextViewTextColor();
txt_message.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));

//设置viewpager页面滑动监听事件
mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
}

/**
* 初始化动画
*/
private void InitImageView() {
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
// 获取分辨率宽度
int screenW = dm.widthPixels;
int imageWidth = (screenW / 3);
//设置动画图片宽度
setImageWidth(cursor, imageWidth);

offset = 0;
//动画图片偏移量赋值
position_one = (int) (screenW / 3.0);
position_two = position_one * 2;
}

/**
* 设置动画图片宽度
*
* @param mWidth
*/
private void setImageWidth(ImageView imageView, int mWidth) {
ViewGroup.LayoutParams params = imageView.getLayoutParams();
params.width = mWidth;
imageView.setLayoutParams(params);
}

/**
* 初始化Fragment,并添加到ArrayList中
*/
private void InitFragment() {
fragmentArrayList = new ArrayList<Fragment>();
fragmentArrayList.add(new MessageFragment());
fragmentArrayList.add(new ConstantFragment());
fragmentArrayList.add(new DynamicFragment());
fragmentManager = getSupportFragmentManager();
}

/**
* 页卡切换监听
*/
public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

@Override
public void onPageSelected(int position) {
Animation animation = null;
Toast.makeText(getApplicationContext(), "" + position + " " + currIndex, Toast.LENGTH_SHORT).show();
switch (position) {
//当前为页卡1
case 0:
//从页卡2跳转转到页卡1
if (currIndex == 1) {
animation = new TranslateAnimation(position_one, 0, 0, 0);
} else if (currIndex == 2) {//从页卡3跳转转到页卡1
animation = new TranslateAnimation(position_two, 0, 0, 0);
}
resetTextViewTextColor();
txt_message.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
break;

//当前为页卡2
case 1:
//从页卡1跳转转到页卡2
if (currIndex == 0) {
animation = new TranslateAnimation(offset, position_one, 0, 0);
} else if (currIndex == 2) { //从页卡3跳转转到页卡2
animation = new TranslateAnimation(position_two, position_one, 0, 0);
}
resetTextViewTextColor();
txt_contact.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
break;

//当前为页卡3
case 2:
//从页卡1跳转转到页卡2
if (currIndex == 0) {
animation = new TranslateAnimation(offset, position_two, 0, 0);
} else if (currIndex == 1) {//从页卡2跳转转到页卡3
animation = new TranslateAnimation(position_one, position_two, 0, 0);
}
resetTextViewTextColor();
txt_dynamic.setTextColor(getResources().getColor(R.color.main_top_tab_color_2));
break;
}
currIndex = position;
animation.setFillAfter(true);// true:图片停在动画结束位置
animation.setDuration(300);
cursor.startAnimation(animation);
}

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageScrollStateChanged(int state) {

}
}

;

/**
* 将顶部文字恢复默认值
*/
private void resetTextViewTextColor() {
txt_message.setTextColor(getResources().getColor(R.color.main_top_tab_color));
txt_contact.setTextColor(getResources().getColor(R.color.main_top_tab_color));
txt_dynamic.setTextColor(getResources().getColor(R.color.main_top_tab_color));
}

@Override
protected void onResume() {
/**
* 设置为竖屏
*/
if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_PORTRAIT) {
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
}
super.onResume();
}

@OnClick({R.id.txt_message, R.id.txt_contact, R.id.txt_dynamic})
public void txtClick(TextView txtView) {
switch (txtView.getId()) {
case R.id.txt_message:
mViewPager.setCurrentItem(0);
break;
case R.id.txt_contact:
mViewPager.setCurrentItem(1);
break;
case R.id.txt_dynamic:
mViewPager.setCurrentItem(2);
break;
}
}
}
   5.2 MessageFragmentpackage orm.ndkdemo.Fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import orm.ndkdemo.R;

/**
* Created by xingyatong on 2018/3/6.
*/
public class MessageFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_message, container, false);
}
}
  5.3 MFragmentPagerAdapterpackage orm.ndkdemo.Fragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
* Created by xingyatong on 2018/3/6.
*/
public class MFragmentPagerAdapter extends FragmentPagerAdapter{
//存放Fragment的数组
private ArrayList<Fragment> fragmentsList;

public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) {
super(fm);
this.fragmentsList = fragmentsList;
}

@Override
public Fragment getItem(int position) {
return fragmentsList.get(position);
}

@Override
public int getCount() {
return fragmentsList.size();
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
super.destroyItem(container, position, object);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: