Android实现界⾯左右滑动切换功能
相信⼤家⼀定都使⽤过⼿机QQ和之类的软件，当我们使⽤时不难发现其界⾯的切换不仅可以通过点击页标签来实现，还可以通过左右滑动来实现的，耗⼦君刚开始学Android时就觉得这样的滑动⼗分酷炫，⼗分想要⾃⼰来实现它。相信⼤家也和耗⼦君⼀样，想要迫不期待的学习怎样实现了吧，OK，下⾯我来详细的讲⼀下如何实现这个功能。
先来欣赏⼀下效果图吧：
⾸先，我们先来认识⼀下控件 ViewPager
ViewPager是Android SDk中⾃带的⼀个附加包android-support-v4.jar中的⼀个类，可以⽤来实现屏幕间的切换。android-support-v4.jar可以在⽹上搜索最新的版本，下载好它后，我们需要把它添加到项⽬中去。
XML布局
⾸先来看⼀下activity的布局，这个布局相信⼤家都能看得懂，第⼀⾏为只有两个TextView的页标，⾄于名字⼤家就不⽤在意了，哈哈，第⼆⾏为滑动界⾯时的滚动条，图⽚⾃⼰要选择并添加到drawable中，长度不要太长哦，第三⾏即为我们要实现的界⾯切换⽤的ViewPager：
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
xmlns:tools="schemas.android/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".MediaPlayerActivity">
<LinearLayout
android:layout_height="50.0dip"
android:background="#FFFFFF"android layout布局
>
<!--layout_weight这个属性为权重，让两个textview平分这个linearLayout-->
<TextView
android:id="@+id/videoLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="视频"
android:textColor="#000000"
android:textSize="20dip"
android:background="@drawable/selector"/>
<TextView
android:id="@+id/musicLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="⾳乐"
android:textColor="#000000"
android:textSize="20dip"
android:background="@drawable/selector"/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="10dp"
android:layout_below="@id/linearLayout"
android:id="@+id/scrollbar"
android:scaleType="matrix"
android:src="@drawable/scrollbar"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/scrollbar">
</android.support.v4.view.ViewPager>
</RelativeLayout>
布局中TextView的background属性是我先设置好的，可以实现在按压其时，可以使得其背景颜⾊得到变换，并在松开时恢复颜⾊。⽅法为在drawable中新建⼀个l⽂件，写下如下代码;
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="schemas.android/apk/res/android">
<item
android:state_pressed="true"
android:drawable="@color/press" />
</selector>
当然，⾸先要在values⽂件夹下新建好l⽂件，配置好press的颜⾊：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="press">#25fa55</color>
</resources>
看完了activity的布局，我们再来看看想要切换的界⾯的布局，这两个布局⽂件只需在layout⽂件中新建就好，不需要新建activity，为了简单，这⾥就只设置了背景颜⾊，能够在测试时看到效果即可：
l:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ad2929">
</RelativeLayout>
l:
<RelativeLayout xmlns:android="schemas.android/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#acbbcf">
</RelativeLayout>
Java代码
ample.blacklotus.multimedia;
import android.app.Activity;
aphics.BitmapFactory;
aphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.VideoView;
import java.util.ArrayList;
public class MediaPlayerActivity extends Activity implements View.OnClickListener{ private ViewPager viewPager;
private ArrayList<View> pageview;
private TextView videoLayout;
private TextView musicLayout;
// 滚动条图⽚
private ImageView scrollbar;
// 滚动条初始偏移量
private int offset = 0;
// 当前页编号
private int currIndex = 0;
// 滚动条宽度
private int bmpW;
//⼀倍滚动量
private int one;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_media_player);
viewPager = (ViewPager) findViewById(R.id.viewPager);
//查布局⽂件⽤LayoutInflater.inflate
LayoutInflater inflater =getLayoutInflater();
View view1 = inflater.inflate(R.layout.video_player, null);
View view2 = inflater.inflate(dia_player, null);
videoLayout = (TextView)findViewById(R.id.videoLayout);
musicLayout = (TextView)findViewById(R.id.musicLayout);
scrollbar = (ImageView)findViewById(R.id.scrollbar);
videoLayout.setOnClickListener(this);
musicLayout.setOnClickListener(this);
pageview =new ArrayList<View>();
//添加想要切换的界⾯
pageview.add(view1);
pageview.add(view2);
//数据适配器
PagerAdapter mPagerAdapter = new PagerAdapter(){
@Override
//获取当前窗体界⾯数
public int getCount() {
/
/ TODO Auto-generated method stub
return pageview.size();
}
@Override
//判断是否由对象⽣成界⾯
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
//使从ViewGroup中移出当前View
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).(arg1));
//返回⼀个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中 public Object instantiateItem(View arg0, int arg1){
((ViewPager)arg0).(arg1));
(arg1);
}
};
//绑定适配器
viewPager.setAdapter(mPagerAdapter);
//设置viewPager的初始界⾯为第⼀个界⾯
viewPager.setCurrentItem(0);
//添加切换界⾯的
viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
// 获取滚动条的宽度
bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth(); //为了获取屏幕宽度，新建⼀个DisplayMetrics对象
DisplayMetrics displayMetrics = new DisplayMetrics();
//将当前窗⼝的⼀些信息放在DisplayMetrics类中
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
//得到屏幕的宽度
int screenW = displayMetrics.widthPixels;
//计算出滚动条初始的偏移量
offset = (screenW / 2 - bmpW) / 2;
//计算出切换⼀个界⾯时，滚动条的位移量
one = offset * 2 + bmpW;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
//将滚动条的初始位置设置成与左边界间隔⼀个offset
scrollbar.setImageMatrix(matrix);
}
public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
/**
* TranslateAnimation的四个属性分别为
* float fromXDelta 动画开始的点离当前View X坐标上的差值
* float toXDelta 动画结束的点离当前View X坐标上的差值
* float fromYDelta 动画开始的点离当前View Y坐标上的差值
* float toYDelta 动画开始的点离当前View Y坐标上的差值
**/
animation = new TranslateAnimation(one, 0, 0, 0);
break;
case 1:
animation = new TranslateAnimation(offset, one, 0, 0);
break;
}
//arg0为切换到的页的编码
currIndex = arg0;
// 将此属性设置为true可以使得图⽚停在动画结束时的位置
animation.setFillAfter(true);
//动画持续时间，单位为毫秒
animation.setDuration(200);
//滚动条开始动画
scrollbar.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
@Override
public void onClick(View view){
switch (Id()){
case R.id.videoLayout:
//点击"视频“时切换到第⼀页
viewPager.setCurrentItem(0);
break;
case R.id.musicLayout:
//点击“⾳乐”时切换的第⼆页
viewPager.setCurrentItem(1);
break;
}
}
OK，以上便是所有的代码，耗⼦君已经在代码中注释的⾮常详细了，相信⼤家都能够理解，是不是觉得
很简单呢，这么“酷炫”的效果就这样实现出来了，哈哈。⼤家要是想要多建⼏个页也可以，不过要把滑动距离什么处理好。若⼤家还有疑问，可以随时问耗⼦君；以上若有错误的地⽅，还请指正，⼤家⼀起学习进步！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论