Giter VIP home page Giter VIP logo

bannerview's Introduction

BannerView

BannerView是一个Android自定义轮播图控件,可以自定义放置轮播的内容、指示器中点的个数,轮播图Item的描述,还有点击监听事件等等。

BannerView可以自适应高度,只需要你根据图片的比例,去设置BannerView的withProportion和heightProportion属性。

app:withProportion="8"
app:heightProportion="3"

一般8:3能有一个较为常见的轮播图效果,但如果图片是正方形就不太适合这个比例

img img

Download

gradle:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}
dependencies {
	implementation 'com.github.LuoSPro:BannerView:1.0.2'
}

layout:

<com.ls.bannerview.banner.BannerView
    android:id="@+id/banner_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:dotSize="3dp"
    app:dotDistance="1dp"
    app:dotGravity="right"
    app:withProportion="8"
    app:heightProportion="3"
    app:bottomColor="@color/banner_bottom_bar_bg_day"
    app:dotIndicatorFocus="@color/dot_select_color"
    app:dotIndicatorNormal="@color/dot_unselect_color"/>

Activity:

kotlin用法
class MainActivity : BaseSkinActivity() {

    private lateinit var mHandler: Handler

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mHandler = Handler(Looper.myLooper()!!)
        mHandler.postDelayed(Runnable { showListData() }, 50)
    }

    private fun showListData() {
        banner_view.setAdapter(object : BannerAdapter() {
            override fun getView(position: Int, convertView: View?): View {//支持用户自定义轮播的View
                val imageView: ImageView = if (convertView == null) {
                    ImageView(this@MainActivity)
                } else {
                    //covertView:缓存的View
                    convertView as ImageView
                }
                imageView.scaleType = ImageView.ScaleType.FIT_XY
                imageView.setImageResource(R.drawable.ic_launcher_background)
                return imageView
            }

            //支持用户自定义指示器的圆点个数
            override fun getCount() = 5

            //支持用户自定义指示器每个ItemView的描述
            override fun getBannerDesc(position: Int): String {
                return "哈哈哈哈"
            }
        })
        //开启自动滚动
        banner_view.startRoll()
        //设置监听
        banner_view.setBannerItemClickListener {
            Toast.makeText(this@MainActivity, "current position $it", Toast.LENGTH_SHORT)
                .show()
        }
    }
}
java用法
public class MainActivity extends AppCompatActivity {

    private BannerView mBannerView;
    private Handler mHandler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBannerView = findViewById(R.id.banner_view);
        mHandler = new Handler(Looper.myLooper());
        //必要的工作
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                showListData();
            }
        },50);
    }

    private void showListData() {
        mBannerView.setAdapter(new BannerAdapter() {
            @Override
            public View getView(int position, View convertView) {//支持用户自定义轮播的View
                ImageView imageView = null;
                //covertView:缓存的View
                if (convertView == null){
                    imageView = new ImageView(MainActivity.this);
                    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                }else{
                    imageView = (ImageView) convertView;
                }
                imageView.setImageResource(R.drawable.ic_launcher_foreground);
                return imageView;
            }

            //支持用户自定义指示器的圆点个数
            @Override
            public int getCount() {
                return 5;
            }

            //支持用户自定义指示器每个ItemView的描述
            @Override
            public String getBannerDesc(int position) {
                return "哈哈哈哈";
            }
        });
        //开启自动滚动
        mBannerView.startRoll();
        //设置监听
        mBannerView.setBannerItemClickListener(new BannerViewPager.BannerItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(MainActivity.this,"current position " + position,Toast.LENGTH_SHORT).show();
            }
        });
    }
}

注意:

使用BannerView的时候,一定要用Handler的postDelayed方法去开启,并且设置延时大于50毫秒以上

原因:因为View的绘制顺序和Activity的生命周期的问题,当Activity的onCreate()方法和onResume()方法执行的时候,View还没开始测量,又由于我们设置了BannerView为自适应高度(Layout布局里面设置的是wrap_content属性),在Activity的onCreate()方法去初始化BannerView的时候,去测量他的宽度的为0,导致BannerView的高度也会为0,所以就不能显示BannerView了。 详情请看我的这篇文章:【Android源码】View的绘制流程

bannerview's People

Contributors

luospro avatar

Stargazers

E71OIZ avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.