关注微信公众号 太平洋学习网 扫描二维码
最新消息:关注【太平洋学习网】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

使用android ViewPager slider左右滑动图片示例

Android 太平洋学习网 浏览 评论

 android ViewPager用于左右滑动图片或Fragment activity界面都是很方便的,这里只介绍ViewPager滑动图片的效果示例,先入门学习一下ViewPager控件的使用,首先来预览下本人的项目结构,以便更好的理解下面的内容,如图所示。

QQ截图20170914230225.png

下面是ViewPager控件的使用步骤。

1:在activity_main.xml文件中添加ViewPager控件,作为父控件显示后面自定义的xml视图。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.baidu.smalldemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myViewPager"/>
</RelativeLayout>

2:在layout文件下新建my_image.xml文件,里面添加一个TextView显示图片的角标,ImageView用于显示我们的图片,实现左右滑动图片的效果,代码如下。

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="你好 viewpager"
        android:textSize="25dp"
        android:textStyle="bold"
        android:gravity="center"
        android:layout_marginTop="25dp"
        android:id="@+id/image_count"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="25dp"
        android:layout_gravity="center"
        android:id="@+id/image_view"/>
</LinearLayout>

3:自定义SliderImageAdapter类,并继承PagerAdapter适配器类,并实现里面的instantiateItem方法,初始化界面的数据,代码如下。

package com.baidu.smalldemo;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
 * Created by ts on 2017/9/14.
 */
public class SliderImageAdapter extends PagerAdapter {
    //图片数据源数组
    private int[] image_resources = {R.drawable.first,R.drawable.second,R.drawable.third};
    //传入调用者页面的context
    private Context context;
    //填充数据的对象
    private LayoutInflater layoutInflater;
    //构造方法
    public SliderImageAdapter(Context context){
        this.context = context;
    }
    //图片的长度
    @Override
    public int getCount() {
        return image_resources.length;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return (view == (LinearLayout)object);
    }
    //此方法是给viewpager填充数据的方法
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        layoutInflater = (LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
        /**
         * 参数一:需要填充那个layout.xml
         * 参数二:填充到哪里
         * 参数三:是否是rootview
         * return 我们自定义的xml文件对象
         */
        View item_view =  layoutInflater.inflate(R.layout.my_images,container,false);
        //通过item_view获取my_images.xml中的ImageView对象
        ImageView imageView = (ImageView)item_view.findViewById(R.id.image_view);
        //通过item_view获取my_images.xml中的TextView对象,显示图片角标
        TextView textView = (TextView)item_view.findViewById(R.id.image_count);
        //设置图片数据源
        imageView.setImageResource(image_resources[position]);
        //设置第几张图片
        textView.setText("第"+position+"角标图片");
        //将item_view加入container容器对象
        container.addView(item_view);
        //返回item_view
        return item_view;
    }
    //viewpager销毁方法
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //从父layout中删除对象
        container.removeView((LinearLayout)object);
    }
}

4:在MainActivity.java主类中初始化ViewPager对象和前面自定义的SliderImageAdapter适配器对象,然后通过viewPager.setAdapter(sliderImageAdapter);方法将我们适配器里面填充的数据设置到ViewPager控件中,代码如下。

package com.baidu.smalldemo;
import android.annotation.TargetApi;
import android.os.Build;
import android.speech.tts.TextToSpeech;
import android.support.annotation.RequiresApi;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import java.util.Locale;
public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private SliderImageAdapter sliderImageAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化ViewPager对象
        viewPager = (ViewPager)findViewById(R.id.myViewPager);
        //初始化自定义的adapter
        sliderImageAdapter = new SliderImageAdapter(this);
        viewPager.setAdapter(sliderImageAdapter);
    }
}

运行之后效果如图所示,非常的好看的效果。

GIF3.gif

完毕!欢迎转载!

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/android/2017/0914/218.html

    与本文相关的文章