1. 程式人生 > >Android 實現輪播圖效果 底部圓點佈局實現

Android 實現輪播圖效果 底部圓點佈局實現

1、準備底部圓點的素材、利用Drawable的功能,去實現一個圓點圖片的展示

drawable下新建兩個Drawable resource file:dot_normal.xml和dot_select.xml

dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/white" />

    <size
        android:width="10dp"
        android:height="10dp" />
</shape>

 dot_select.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/black" />

    <size
        android:width="10dp"
        android:height="10dp" />

</shape>

 新建類ImageBannerFramLayout繼承FrameLayout並Create constructor matching super(實現前面三個構造方法就行)

 

實現方法initImageBannerViewGroup()和initDotLinearlayout()並在三個構造方法中呼叫

    //構造方法
    public ImageBannerFramLayout(@NonNull Context context) {
        super(context);
        initImageBannerViewGroup();
        initDotLinearlayout();
    }

    public ImageBannerFramLayout(@NonNull Context context, @Nullable AttributeSet attrs){
        super(context, attrs);
        initImageBannerViewGroup();
        initDotLinearlayout();
    }

    public ImageBannerFramLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initImageBannerViewGroup();
        initDotLinearlayout();
    }

    /**
     * 初始化自定義的圖片輪播核心類
     */
    private void initImageBannerViewGroup() {
        imageBannerViewGroup = new ImageBannerViewGroup(getContext());
        //設定寬度和高度
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT);
        imageBannerViewGroup.setLayoutParams(lp);
        imageBannerViewGroup.setDotChangeListener(this);//這裡將Listener傳遞給Framlayout
        imageBannerViewGroup.setImageBannerLister(this);
        addView(imageBannerViewGroup);

    }

    /**
     * 初始化底部圓點佈局
     */
    private void initDotLinearlayout() {
        linearLayout = new LinearLayout(getContext());
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, 40);
        linearLayout.setLayoutParams(lp);

        //水平並居中
        linearLayout.setOrientation(LinearLayout.HORIZONTAL);
        linearLayout.setGravity(Gravity.CENTER);

        //設定背景顏色
//        linearLayout.setBackgroundColor(Color.RED);

        addView(linearLayout);

        //將圓點放到底部
        FrameLayout.LayoutParams layoutParams = (LayoutParams) linearLayout.getLayoutParams();
        layoutParams.gravity = Gravity.BOTTOM;
        linearLayout.setLayoutParams(layoutParams);

        //設定底部圓點透明度 3.0之後使用setAlpha(),3.0之前也是使用這個方法,但呼叫者不同
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            linearLayout.setAlpha(0.5f);//傳入float值
        } else {
            linearLayout.getBackground().setAlpha(100);//傳入int值0~255
        }


    }

新增方法addDotToLinearlayout()和addBitmapToImageBannerViewGroup()並在addBitmaps()中呼叫

public void addBitmaps(List<Bitmap> list) {
        for (int i = 0; i < list.size(); i++) {
            Bitmap bitmap = list.get(i);
            addBitmapToImageBannerViewGroup(bitmap);
            addDotToLinearlayout();
        }
    }

    private void addDotToLinearlayout() {
        ImageView imageView = new ImageView(getContext());
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

        //設定圓點的距離
        lp.setMargins(5, 5, 5, 5);

        imageView.setLayoutParams(lp);
        imageView.setImageResource(R.drawable.dot_normal);
        linearLayout.addView(imageView);

    }

    private void addBitmapToImageBannerViewGroup(Bitmap bitmap) {
        ImageView imageView = new ImageView(getContext());

        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

        //設定寬度(裝置的寬度儲存在全域性變數C.WIDTH中)和高度
        imageView.setLayoutParams(new ViewGroup.LayoutParams(C.WIDTH, ViewGroup.LayoutParams.WRAP_CONTENT));

        imageView.setImageBitmap(bitmap);
        imageBannerViewGroup.addView(imageView);
    }