Je pense que tout le monde doit avoir utilisé des logiciels tels que QQ mobile et WeChat. Lorsque nous l'utilisons, il n'est pas difficile de constater que le changement d'interface peut être obtenu non seulement en cliquant sur l'onglet de la page, mais également en glissant vers la gauche et la droite. M. Mouse vient tout juste de commencer à apprendre Android. J'ai toujours pensé que glisser comme celui-ci était très cool et je voulais vraiment le réaliser moi-même. Je crois que tout le monde, comme M. Mouse, veut apprendre à l'implémenter sans attendre. OK, laissez-moi vous expliquer en détail comment implémenter cette fonction.
Tout d’abord, faisons connaissance avec le contrôle ViewPager
ViewPager est une classe dans android-support-v4.jar, un package supplémentaire fourni avec le SDk Android, et peut être utilisé pour basculer entre les écrans. La dernière version d'android-support-v4.jar peut être recherchée en ligne. Après l'avoir téléchargée, nous devons l'ajouter au projet.
Mise en page XML
Tout d'abord, jetons un coup d'œil à la présentation de l'activité. Je pense que tout le monde peut comprendre cette présentation. La première ligne n'a que deux étiquettes de page TextView, vous n'avez pas besoin de vous soucier du nom. la deuxième ligne est la barre de défilement lorsque vous faites glisser l'interface. Image Vous devez la sélectionner et l'ajouter au dessin. La troisième ligne est le ViewPager pour le changement d'interface que nous voulons implémenter.
<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>J'ai d'abord défini la propriété d'arrière-plan de TextView dans la mise en page, de sorte que lorsqu'elle est enfoncée, sa couleur d'arrière-plan puisse être modifiée et la couleur soit restaurée lorsqu'elle est relâchée. La méthode consiste à créer un fichier selector.xml en drawable et à écrire le code suivant :
sélecteur.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>Bien entendu, vous devez d'abord créer un nouveau fichier colours.xml dans le dossier valeurs et configurer la couleur de presse :
couleurs.xml :
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="press">#25fa55</color> </resources>
Après avoir examiné la mise en page de l'activité, jetons un œil à la mise en page de l'interface que nous souhaitons changer. Ces deux fichiers de mise en page doivent uniquement être créés dans le fichier de mise en page. Il n'est pas nécessaire de créer une nouvelle activité. , nous définissons uniquement la couleur d'arrière-plan ici. Vous pouvez voir l'effet lors des tests :
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>
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>
Code 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;
}
}
}OK, ce qui précède est tout le code que M. Mouse a commenté en détail dans le code. Je pense que tout le monde peut le comprendre. Pensez-vous que c'est très simple ? Si vous souhaitez créer quelques pages supplémentaires, vous le pouvez, mais vous devez gérer la distance de glissement. Si vous avez encore des questions, vous pouvez les poser à M. Mouse à tout moment ; s'il y a des erreurs dans ce qui précède, veuillez me corriger et apprenons et améliorons ensemble !
Pour plus d'articles liés à l'implémentation par Android de la fonction de commutation coulissante gauche et droite de l'interface, veuillez faire attention au site Web PHP chinois !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
