ANDROID进阶之路 - 五分钟内快速实现轮播图效果

  • 第一种方式

 

原作者的Github地址:

https://github.com/Jude95/RollViewPager#usage
  • 1

build.gradle 添加:

compile 'com.jude:rollviewpager:1.4.6'
  • 1

在需要使用轮播的地方,使用我们引用的第三方控件:

 <com.jude.rollviewpager.RollPagerView
        android:layout_margin="3dp"
        android:id="@+id/carousel_image"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        app:rollviewpager_play_delay="3000"/>

MainActivity:

package com.example.carouselimage;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import com.jude.rollviewpager.OnItemClickListener;
import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.adapter.StaticPagerAdapter;
import com.jude.rollviewpager.hintview.ColorPointHintView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private RollPagerView mCarousel;
    private List imagesList=new ArrayList();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }

    private void init() {
        mCarousel = (RollPagerView) findViewById(R.id.carousel_image);

        imagesList.add(R.drawable.img_1);
        imagesList.add(R.drawable.img_2);
        imagesList.add(R.drawable.img_3);
        imagesList.add(R.drawable.img_4);
        imagesList.add(R.drawable.img_5);


        //设置轮播图下的点的颜色
        mCarousel.setHintView(new ColorPointHintView(this,Color.RED,Color.WHITE));
        //设置图片轮播时间
        mCarousel.setPlayDelay(2000);
        //设置动画的持续时间
        //设置动画后很别扭,取消与否在与自己
        // mCarousel.setAnimationDurtion(2000);
        mCarousel.setAnimationDurtion(0);
        //设置适配器
        mCarousel.setAdapter(new OurAdapter(imagesList));
        //子条目点击
        mCarousel.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this,"This item is "+position,Toast.LENGTH_LONG).show();
            }
        });
    }

    public class OurAdapter extends StaticPagerAdapter{
        List lists=new ArrayList();

        public OurAdapter(List lists) {
            this.lists = lists;
        }

        @Override
        public View getView(ViewGroup container, int position) {
            ImageView imageView = new ImageView(container.getContext());
            imageView.setImageResource((Integer) lists.get(position));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));
            return imageView;
        }

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


MainActivity Xml :

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

    <com.jude.rollviewpager.RollPagerView
        android:layout_margin="3dp"
        android:id="@+id/carousel_image"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        app:rollviewpager_play_delay="3000"/>
</LinearLayout>
  • 第二种方式

Effect:

原作者Github地址

build引入:

compile 'com.xhb:xbanner:1.3.5'
  • 1

Xml使用(这里用的是圆点样式,自己设置对应的状态颜色):

  <com.stx.xhb.xbanner.XBanner
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/xbanner"
            android:layout_width="match_parent"
            android:layout_height="130dp"
            android:layout_marginBottom="@dimen/d20"
            android:layout_marginLeft="@dimen/d15"
            android:layout_marginRight="@dimen/d15"
            android:layout_marginTop="@dimen/d20"
            android:background="@mipmap/ic_home_open_bg"
            app:AutoPlayTime="2000"
            app:isShowIndicatorOnlyOne="true"
            app:pageChangeDuration="3000"
            app:pointsPosition="CENTER"
            app:pointNormal="@drawable/shape_noraml"
            app:pointSelect="@drawable/shape_selected"
            app:pointsVisibility="true"
            />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

onCreate生命周期内:

        /**
         * 加入图片
         * */
        imgLists = new ArrayList<>();
        imgLists.add(R.mipmap.bg_confirm_price);
        imgLists.add(R.mipmap.bg_confirm_price);
        imgLists.add(R.mipmap.bg_confirm_price);
        //第二个参数为提示文字资源集合
        mBanner.setData(imgLists, null);
        //加载图片
         mBanner.setmAdapter(this);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

图片加载:

   @Override
    public void loadBanner(XBanner banner, Object model, View view, int position) {
        Glide.with(this).load(imgLists.get(position)).into((ImageView) view);
    }
  • 1
  • 2
  • 3
  • 4

动画设置:

 /**共九种动画模式
    Default,
    Alpha,
    Rotate,
    Cube,
    Flip,
    Accordion,
    ZoomFade,
    ZoomCenter,
    ZoomStack,
    Stack,
    Depth,
    Zoom
    */
 mBanner.setPageTransformer(Transformer.Accordion);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

子条目点击事件:

 mBanner.setmAdapter(this);
        mBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
            @Override
            public void onItemClick(XBanner banner, int position) {
                Toast.makeText(getActivity(), "点击了第" + position + "图片", Toast.LENGTH_SHORT).show();
            }
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

圆点样式,用在
app:pointNormal=”@drawable/shape_noraml”
app:pointSelect=”@drawable/shape_selected”

shape_noraml.xml (直接Copy)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="6dp" android:height="6dp" />
    <solid android:color="@android:color/white" />
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

shape_selected.xml(直接Copy)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="6dp" android:height="6dp" />
    <solid android:color="#4081D6" />
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

建议(优化代码):

  @Override
    public void onResume() {
        super.onResume();
        mBanner.startAutoPlay();
    }

    @Override
    public void onStop() {
        super.onStop();
        mBanner.stopAutoPlay();
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

自定义属性说明(如需要一些扩展属性可以查看)

属性名 属性说明 属性值
isAutoPlay 是否支持自动轮播 boolean类型,默认为true
isTipsMarquee 是否支持提示性文字跑马灯效果 boolean类型,默认为false
AutoPlayTime 图片轮播时间间隔 int值,默认为5s
pointNormal 指示器未选中时状态点 drawable,不设置的话为默认状态点
pointSelect 指示器选中时状态点 drawable,不设置的话为默认状态点
pointsVisibility 是否显示指示器 boolean类型,默认为true
pointsPosition 指示点显示位置 LEFT、CENTER、RIGHT类型,默认为CENTER
pointsContainerBackground 指示器背景 可自定义设置指示器背景
pointContainerPosition 指示器显示位置 TOP、BOTTOM类型,默认为BOTTOM
pointContainerLeftRightPadding 指示点容器左右内间距 dimension,默认为10dp
pointTopBottomPadding 指示点上下内间距 dimension,默认为6dp
pointLeftRightPadding 指示点左右内间距 dimension,默认为3dp
tipTextColor 提示文案的文字颜色 reference
tipTextSize 提示文案的文字大小 dimension,默认为10dp
isShowNumberIndicator 是否显示数字指示器 boolean,默认为false不显示
numberIndicatorBacgroud 数字指示器背景 reference
isShowIndicatorOnlyOne 当只有一张图片的时候是否显示指示点 boolean,默认为false,不显示
pageChangeDuration 图片切换速度 int值,默认为1000ms
isHandLoop 是否支持手动无限循环切换图片 boolean类型,默认为false

  • 1
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
感谢您的提问。要实现指南针功能,我们需要使用Android的Sensor(传感器)API。下面是一些基本步骤: 1. 获取SensorManager对象。您可以通过以下方式获取: ```java SensorManager sensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE); ``` 2. 获取方向传感器。我们需要使用Android设备上的方向传感器来获取设备的方向。您可以使用以下代码获取方向传感器: ```java Sensor orientationSensor = sensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION); ``` 请注意,`Sensor.TYPE_ORIENTATION`在Android API级别20中被弃用。您应该使用`Sensor.TYPE_ROTATION_VECTOR`代替。 3. 创建SensorEventListener。我们需要实现`SensorEventListener`接口来接收传感器数据。您可以使用以下代码来创建一个SensorEventListener: ```java private final SensorEventListener sensorEventListener = new SensorEventListener() { @Override public void onSensorChanged(SensorEvent event) { // 当传感器数据更新时调用此方法 // 在这里更新指南针方向 } @Override public void onAccuracyChanged(Sensor sensor, int accuracy) { // 当传感器精度发生变化时调用此方法 } }; ``` 4. 注册SensorEventListener。您需要在Activity的生命周期方法(例如`onResume()`)中注册`SensorEventListener`,以便在传感器数据更新时接收通知。您可以使用以下代码进行注册: ```java sensorManager.registerListener(sensorEventListener, orientationSensor, SensorManager.SENSOR_DELAY_UI); ``` 请注意,`SENSOR_DELAY_UI`表示传感器数据应该以与UI线程更新相同的频率更新。您可以使用其他常量来指定更新频率。 5. 实现指南针方向。您需要使用传感器数据来计算设备的方向,并更新指南针方向。您可以使用以下代码来获取设备的方向: ```java float[] orientationValues = new float[3]; SensorManager.getOrientation(event.values, orientationValues); float azimuth = Math.toDegrees(orientationValues[0]); ``` 请注意,`azimuth`表示设备的方向,以度为单位。 6. 更新指南针方向。您需要在UI线程中更新指南针方向。您可以使用以下代码来更新指南针方向: ```java runOnUiThread(new Runnable() { @Override public void run() { compassView.setDirection(azimuth); } }); ``` 请注意,`compassView`是一个自定义视图,用于绘制指南针。 这些是实现指南针功能的基本步骤。您需要根据自己的需求进行调整和修改。祝您好运!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值