首页 > 系统 > Android > 正文

Android实现页面左右切换

2019-11-08 00:05:18
字体:
来源:转载
供稿:网友

首先,我们先来认识一下控件 ViewPager

ViewPager是Android SDk中自带的一个附加包android-support-v4.jar中的一个类,可以用来实现屏幕间的切换。android-support-v4.jar可以在网上搜索最新的版本,下载好它后,我们需要把它添加到项目中去。

xml布局

首先来看一下activity的布局,这个布局相信大家都能看得懂,第一行为只有两个TextView的页标,至于名字大家就不用在意了,哈哈,第二行为滑动界面时的滚动条,图片自己要选择并添加到drawable中,长度不要太长哦,第三行即为我们要实现的界面切换用的ViewPager:

<RelativeLayout 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" tools:context=".MediaPlayerActivity"> <LinearLayout android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="50.0dip" android:background="#FFFFFF" > <!--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>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515212345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

布局中TextView的background属性是我先设置好的,可以实现在按压其时,可以使得其背景颜色得到变换,并在松开时恢复颜色。方法为在drawable中新建一个selector.xml文件,写下如下代码; selector.xml:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_PRessed="true" android:drawable="@color/press" /></selector>123456123456

当然,首先要在values文件夹下新建好colors.xml文件,配置好press的颜色: colors.xml:

<?xml version="1.0" encoding="utf-8"?><resources> <color name="press">#25fa55</color></resources>12341234

看完了activity的布局,我们再来看看想要切换的界面的布局,这两个布局文件只需在layout文件中新建就好,不需要新建activity,为了简单,这里就只设置了背景颜色,能够在测试时看到效果即可: video_player.xml:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ad2929"></RelativeLayout>123456123456

media_player.xml:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#acbbcf"></RelativeLayout>123456123456

java代码

package com.example.blacklotus.multimedia;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.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) { super.onCreate(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(R.layout.media_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).removeView(pageview.get(arg1)); } //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中 public Object instantiateItem(View arg0, int arg1){ ((ViewPager)arg0).addView(pageview.get(arg1)); return pageview.get(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 (view.getId()){ case R.id.videoLayout: //点击"视频“时切换到第一页 viewPager.setCurrentItem(0); break; case R.id.musicLayout: //点击“音乐”时切换的第二页 viewPager.setCurrentItem(1); break; } }}
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表