2. 程式人生 > >自定義組合控制元件：Banner、輪播圖、廣告欄控制元件

自定義組合控制元件：Banner、輪播圖、廣告欄控制元件

阿新 • • 發佈：2018-12-22

1. 專案概述

這裡，我們使用自定義組合控制元件實現一個自動輪播的廣告條，也叫輪播圖，完整版的效果圖如下圖所示。其實，這就是我們經常見到的滾動廣告，預設情況下每隔N 秒會自動滾動，用手指左右滑動時也會切換到上一張或者下一張。當介面切換時，對應廣告圖片的標題也會隨著改變，並且還有對應圖片索引的點也會被選中變為紅色。此處，實現的核心控制元件是ViewPager，它是Android3.0 版本加入的新控制元件，為了向下相容，谷歌給我們提供了android-support-v4.jar 包。

這裡寫圖片描述

2. 輪播圖UI佈局

佈局整體採用RelativeLayout，android.support.v4.view.ViewPager，TextView，LinearLayout 配合使用佈局檔案activity_main.xml 的程式碼如下檔案所示：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.view.ViewPager

 
            android:id="@+id/vp_pager"
            android:layout_width="match_parent"
            android:layout_height="160dp"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background
 
="#a000"
            android:orientation="vertical"
            android:padding="5dp">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="新聞標題"
                android:textColor="#fff"
                android:textSize="16sp"/>

            <LinearLayout
                android:id="@+id/ll_container"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:orientation="horizontal">
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>

3. 輪播圖的程式碼邏輯實現

<?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="wrap_content"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v4.view.ViewPager
            android:id="@id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="180dp"/>
        <!--android:background="#a000"-->
        <LinearLayout
            android:id="@id/content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:orientation="vertical"
            android:padding="5dp">

            <TextView
                android:id="@id/tvTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"/>

            <LinearLayout
                android:id="@id/llcontainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal"/>

        </LinearLayout>
    </FrameLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>
public class BannerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    @Bind(R.id.viewpager)
    public ViewPager mViewPager;
    @Bind(R.id.tvTitle)
    public TextView mTextView;
    @Bind(R.id.llcontainer)
    public LinearLayout mContainer;
    @Bind(R.id.content)
    public LinearLayout mContent;
    @Bind(R.id.recyclerview)
    RecyclerView mRecyclerView;

    private int mPreviousPos;
    private int[] imgs = new int[]{R.mipmap.a, R.mipmap.b, R.mipmap.c, R.mipmap.d, R.mipmap.e};
    private String[] title;
    private ArrayList<String> transformerList = new ArrayList<>();
    private RvAdapter mRvAdapter;

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            int currentItem = mViewPager.getCurrentItem();
            mViewPager.setCurrentItem(++currentItem);
            mHandler.sendEmptyMessageDelayed(0, 5000);
        }
    };
    private ViewPagerScroller mScroller;
    private ViewPagerScroller scroller;
    private ActionBar mActionBar;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
        initRecyclerView();
        initListener();
        initTransformer();
        initViewPagerScroll();
    }

    private void initView() {
        setContentView(R.layout.activity_banner);
        ButterKnife.bind(this);
        title = UIUtil.getStringArray(R.array.title);

        SpannableString actionBarTitle = new SpannableString("大圖輪播");
        actionBarTitle.setSpan(new ForegroundColorSpan(Color.WHITE), 0, actionBarTitle.length(),
                Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        mActionBar = getSupportActionBar();
        mActionBar.setTitle(actionBarTitle);

        mViewPager.setAdapter(new Adapter());
        int middle = Integer.MAX_VALUE / 2;
        int extra = middle % imgs.length;
        int currentItem = middle - extra;
        mViewPager.setCurrentItem(currentItem);
        mHandler.sendEmptyMessageDelayed(0, 5000);

        for (int i = 0; i < imgs.length; i++) {
            ImageView img = new ImageView(this);
            img.setImageResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout
                    .LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            if (i != 0) {
                params.leftMargin = 10;
                img.setEnabled(false);
            }
            img.setLayoutParams(params);
            mContainer.addView(img);
        }
        mTextView.setText(title[0]);

       mViewPager.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver
                .OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                BannerActivity.this.onPageSelected(0);
                mViewPager.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });
    }

    private void initRecyclerView() {
        LinearLayoutManager manager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(manager);
        mRvAdapter = new RvAdapter(this, R.layout.list_item, transformerList);
        mRecyclerView.setAdapter(mRvAdapter);
    }

    private void initListener() {
        mViewPager.addOnPageChangeListener(this);
        /*new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int
                    positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                int pos = position % imgs.length;
                mTextView.setText(title[pos]);
                mContainer.getChildAt(pos).setEnabled(true);
                mContainer.getChildAt(mPreviousPos).setEnabled(false);
                mPreviousPos = pos;
                colorChange(pos);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        }*/

        mViewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        mHandler.removeCallbacksAndMessages(null);
                        break;
                    case MotionEvent.ACTION_MOVE:
                        break;
                    case MotionEvent.ACTION_UP:
                        mHandler.sendEmptyMessageDelayed(0, 5000);
                        break;
                }
                return false;
            }
        });

        mRvAdapter.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(ViewGroup parent, View view, Object o, int position) {
                String transforemerName = transformerList.get(position);
                try {
                    Class clazz = Class.forName("com.ToxicBakery.viewpager.transforms." +
                            transforemerName);
                    ABaseTransformer transformer = (ABaseTransformer) clazz.newInstance();
                    mViewPager.setPageTransformer(true, transformer);
                    if (transforemerName.equals("StackTransformer")) {
                        scroller.setScrollDuration(1200);
                    }
                } catch (ClassNotFoundException e) {
                    e.printStackTrace();
                } catch (InstantiationException e) {
                    e.printStackTrace();
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
            }

            @Override
            public boolean onItemLongClick(ViewGroup parent, View view, Object o, int position) {
                return false;
            }
        });
    }

    /**
     * 設定ViewPager的滑動速度
     */
    private void initViewPagerScroll() {
        Field mScroller = null;
        try {
            mScroller = ViewPager.class.getDeclaredField("mScroller");
            mScroller.setAccessible(true);
            scroller = new ViewPagerScroller(mViewPager.getContext());
            mScroller.set(mViewPager, scroller);
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }

    private void initTransformer() {
        //各種翻頁效果
        transformerList.add(DefaultTransformer.class.getSimpleName());
        transformerList.add(AccordionTransformer.class.getSimpleName());
        transformerList.add(BackgroundToForegroundTransformer.class.getSimpleName());
        transformerList.add(CubeInTransformer.class.getSimpleName());
        transformerList.add(CubeOutTransformer.class.getSimpleName());
        transformerList.add(DepthPageTransformer.class.getSimpleName());
        transformerList.add(FlipHorizontalTransformer.class.getSimpleName());
        transformerList.add(FlipVerticalTransformer.class.getSimpleName());
        transformerList.add(ForegroundToBackgroundTransformer.class.getSimpleName());
        transformerList.add(RotateDownTransformer.class.getSimpleName());
        transformerList.add(RotateUpTransformer.class.getSimpleName());
        transformerList.add(StackTransformer.class.getSimpleName());
        transformerList.add(ZoomInTransformer.class.getSimpleName());
        transformerList.add(ZoomOutTranformer.class.getSimpleName());

        mRvAdapter.notifyDataSetChanged();
    }

    private void colorChange(int pos) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), imgs[pos]);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch vibrant = palette.getVibrantSwatch();
                mContent.setBackgroundColor(toARGB(vibrant.getRgb()));
                mTextView.setTextColor(vibrant.getBodyTextColor());
                mActionBar.setBackgroundDrawable(new ColorDrawable(vibrant.getRgb()));

                if (Build.VERSION.SDK_INT >=21){
                    Window window = getWindow();
                    window.setStatusBarColor(colorBurn(vibrant.getRgb()));
                    //window.setNavigationBarColor(Color.RED);
                }
            }
        });
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        int pos = position % imgs.length;
        mTextView.setText(title[pos]);
        mContainer.getChildAt(pos).setEnabled(true);
        if (pos != mPreviousPos){
            mContainer.getChildAt(mPreviousPos).setEnabled(false);
        }
        mPreviousPos = pos;
        colorChange(pos);
    }

    /**
     * 顏色新增透明度
     * @param rgb
     * @return
     */
    protected  static  int toARGB(int rgb){
        int red = rgb >> 16 & 0xFF;
        int green = rgb >> 8 & 0xFF;
        int blue = rgb & 0xFF;
        return Color.argb(180 , red , green , blue );
    }

    /**
     * 顏色加深處理
     * @param RGBValues
     * @return
     */
    private int colorBurn(int RGBValues) {
        int alpha = RGBValues >> 24;
        int red = RGBValues >> 16 & 0xFF;
        int green = RGBValues >> 8 & 0xFF;
        int blue = RGBValues & 0xFF;
        red = (int) Math.floor(red * (1 - 0.1));
        green = (int) Math.floor(green * (1 - 0.1));
        blue = (int) Math.floor(blue * (1 - 0.1));
        return Color.rgb(red, green, blue);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    private class Adapter extends PagerAdapter {

        @Override
        public int getCount() {
            if (imgs.length != 0) {
                return Integer.MAX_VALUE;
            }
            return 0;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            int pos = position % imgs.length;
            ImageView img = new ImageView(BannerActivity.this);
            img.setBackgroundResource(imgs[pos]);
            container.addView(img);
            return img;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }

    private class RvAdapter extends CommonAdapter<String> {

        public RvAdapter(Context context, int layoutId, List<String> datas) {
            super(context, layoutId, datas);
        }

        @Override
        public void convert(ViewHolder holder, String s) {
            holder.setText(R.id.tv_item, s);
        }
    }
}

4. 把Banner封裝成一個模組

public class RollViewPager extends ViewPager implements ViewPager.OnPageChangeListener {

    private List<String> mImageLists;
    private List<String> mTitleLists;
    private List<View>   mDotLists;
    public  Context      mContext;
    private TextView     mTopNewsTitle;
    private Task         mTask;
    private boolean hasAdapter   = false;
    private int     oldPosition  = 0;
    private int     mCurrentItem = 0;
    private int  downX;
    private int  downY;
    private long downTimeMillis;

    // 是否滑動
    private boolean isMove = false;

    public RollViewPager(Context context, List<View> mDotLists) {
        super(context);
        this.mDotLists = mDotLists;
        this.mContext = context;
        mTask = new Task();

        // 設定viewpager 的觸控事件
        RollViewPager.this.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                // 當手指觸控到螢幕的時候。viewpage 停止跳動
                // 當手指離開螢幕的時候。viewpage 繼續跳動

                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    // 獲取到down 的時間

                    downTimeMillis = System.currentTimeMillis();

                    // 停止跳動
                    // 刪除訊息
                    handler.removeCallbacksAndMessages(null);

                    // 刪除任務
                    //handler.removeCallbacks(mTask);
                } else if (event.getAction() == MotionEvent.ACTION_UP) {
                    // 獲取的是當前時間
                    long currentTimeMillis = System.currentTimeMillis();
                    if (currentTimeMillis - downTimeMillis < 500) {
                        // Toast.makeText(mContext, "我被點選了", 0).show();
                        if (mViewPageOnTouchListener != null) {
                            mViewPageOnTouchListener.onViewPageClickListener();
                        }
                    }
                    // 繼續跳動
                    start();
                } else if (event.getAction() == MotionEvent.ACTION_CANCEL) {
                    System.out.println("MotionEvent.ACTION_CANCEL");
                    start();
                }

                return false;
            }
        });
    }

    public void start() {
        if (!hasAdapter) {
            hasAdapter = true;
            RollViewPagerAdapter adapter = new RollViewPagerAdapter();
            RollViewPager.this.setAdapter(adapter);
            RollViewPager.this.setOnPageChangeListener(this);
        }
        handler.postDelayed(mTask, 2000);
    }

    public void stop() {
        handler.removeCallbacksAndMessages(null);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels);
    }

    @Override
    public void onPageSelected(int position) {
        mCurrentItem = position;

        if (null != mTitleLists && mTitleLists.size() > 0
                && null != mTopNewsTitle) {
            mTopNewsTitle.setText(mTitleLists.get(position));
        }

        if (null != mDotLists && mDotLists.size() > 0) {
            mDotLists.get(position).setBackgroundResource(R.drawable.dot_focus);
            mDotLists.get(oldPosition).setBackgroundResource(
                    R.drawable.dot_normal);
        }
        oldPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = (int) ev.getX();
                downY = (int) ev.getY();
                // isMove = false;
                break;

            case MotionEvent.ACTION_MOVE:

                int currentX = (int) ev.getX();
                int currentY = (int) ev.getY();

                if (Math.abs(currentX - downX) > Math.abs(currentY - downY)) {
                    // 左右滑動viewPage

                    isMove = false;
                } else {
                    // 上下滑動listview
                    isMove = true;
                }

                break;
        }
        // 請求父類不要攔截我
        getParent().requestDisallowInterceptTouchEvent(!isMove);

        return super.dispatchTouchEvent(ev);
    }

    private class RollViewPagerAdapter extends PagerAdapter {

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView((View) object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = View.inflate(mContext, R.layout.viewpager_item, null);
            ImageView image = (ImageView) view.findViewById(R.id.image);
            BitmapUtils.display(mContext, image, mImageLists.get(position));
            container.addView(view);
            return view;
        }

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

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

    }

    /**
     * 設定輪播圖上面的標題
     *
     * @param mTopNewsTitle
     * @param mTitleLists
     */
    public void setTextTitle(TextView mTopNewsTitle, List<String> mTitleLists) {
        if (null != mTopNewsTitle && null != mTitleLists && mTitleLists.size() > 0) {
            this.mTopNewsTitle = mTopNewsTitle;
            this.mTitleLists = mTitleLists;
            mTopNewsTitle.setText(mTitleLists.get(0));
        }

    }

    /**
     * 設定背景圖片
     *
     * @param mImageLists
     */
    public void setImageRes(List<String> mImageLists) {
        this.mImageLists = mImageLists;
    }

    private class Task implements Runnable {

        @Override
        public void run() {
            mCurrentItem = (mCurrentItem + 1) % mImageLists.size();
            handler.obtainMessage().sendToTarget();
        }

    }

    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            RollViewPager.this.setCurrentItem(mCurrentItem, false);
            start();
        }
    };

    private ViewPageOnTouchListener mViewPageOnTouchListener;

    public interface ViewPageOnTouchListener {
        public void onViewPageClickListener();
    }

    public void setViewPageOnTouchListener(ViewPageOnTouchListener viewPageOnTouchListener) {
        mViewPageOnTouchListener = viewPageOnTouchListener;
    }
}

5. 開源專案

關於我

License

Copyright 2015 AllenIverson

Copyright 2012 Jake Wharton
Copyright 2011 Patrik Åkerfeldt
Copyright 2011 Francisco Figueiredo Jr.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

相關推薦

自定義組合控制元件：Banner、輪播圖、廣告欄控制元件

1. 專案概述 這裡，我們使用自定義組合控制元件實現一個自動輪播的廣告條，也叫輪播圖，完整版的效果圖如下圖所示。其實，這就是我們經常見到的滾動廣告，預設情況下每隔N 秒會自動滾動，用手指左右滑動時也會切換到上一張或者下一張。當介面切換時，對應廣告圖片的標題也會

Android banner，輪播圖自動滾動控制元件

簡介 現在的絕大數app都有banner介面，實現迴圈播放多個廣告圖片和手動滑動迴圈等功能。因為ViewPager並不支援迴圈翻頁， 所以要實現迴圈還得需要自己去動手，我就把專案中的控制元件剔了出來，希望大家覺得有用。目前框架可以進行不同樣式、不同動畫設定，

（原生JS） 圖片無縫滾動、圖片轉化、輪播圖、摺疊效果

1.圖片無縫滾動（原生JS）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動</title&g

Android 輪播圖 實現 一 ：三方框架 自定義viewPager （CircleViewPager.）實現無限輪播。

使用流程：1  。 gradle中新增依賴compile 'com.zhpan.library:viewpager:1.0.3'2.在xml檔案中新增如下程式碼：<com.zhpan.viewpager.view.CircleViewPager andr

2018-1-12電子表、存成績、輪播圖

獲取 innerhtml 生成 png 返回 二維數組 點擊 inf 計算 　　今天整理了幾個有關於Javascript的實例： 1、電子表： <body>　　 　　<h2></h2>　　 　　<inpu

初學：react-native 輪播圖

mysl AR paginati opacity tin stat scrip eight res 參考資料：http://reactscript.com/react-native-card-carousel-component/ import React, {Compon

Flask實戰第53天：cms編輯輪播圖功能完成

當我 edi comm 前端 ces 直接 ide func 需要 後端邏輯 表單驗證， 這裏編輯就是和添加的內容一樣，所以可以直接繼承添加輪播圖的表單驗證，然後多加一個輪播圖的id即可 編輯cmd.forms.py class UpdateBannerForm(

輪播圖、pulltofresh上拉重新整理，下拉載入

@輪播圖、pulltofresh上拉重新整理，下拉載入TOC import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v4.view.Vi

小程式首頁的輪播圖、導航、間隔、入口

index.wxml <!-- 首頁輪播圖分割槽 --> <view class='slider'> <swiper indicator-dots="{{ true }}" autoplay="{{ true }}" interval

微信小程式學習筆記（三）----初識小程式程式碼、輪播圖實現

從這一節開始我們就開始接觸小程式前臺程式碼了，其實前臺邏輯還是比較簡單的，學習難度比學習一個前端框架難不了多少，記得以前一開始學前端框架的時候，流程就是：熟悉一下--檢視元件--找到要用的--複製貼上，其實對於大部分人來說，小程式前臺也是一樣。 首先，我們可以先看下小程式的

Android框架之路——Banner實現輪播圖（RecyclerView新增Header）

一、簡介 Banner能實現迴圈播放多個廣告圖片和手動滑動迴圈等功能。因為原生ViewPager並不支援迴圈翻頁， 要實現迴圈還得需要自己去動手。Banner框架可以進行不同樣式、不同動畫設定， 以及完善的api方法能滿足大部分軟體首頁輪播圖效果的需求。

Android的banner（輪播圖）的實現

本文使用了ViewPager來實現輪播圖的功能，輪播的圖片資源來源於網上。 一、思路 1、就是使得ViewPager實現啟動頁來無限的輪播圖片 2、啟動一個定時器來完成自動的輪播效果。 二、寫佈局程式碼 1、我們先是來看一下

Banner載入輪播圖

//需要的依賴compile 'com.youth.banner:banner:1.4.9' compile 'com.github.bumptech.glide:glide:4.0.0' =======================================

一行多餘隱藏、多行多於隱藏、輪播圖下面點點居中

一行多餘隱藏： overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis; 多行多於隱藏： overflow: hidden; text-overflo

Banner(ImageLoader)輪播圖

匯入依賴: implementation 'com.youth.banner:banner:1.4.9' 新增網路許可權: <uses-permission android:name="android.permission.INTERNET" /> Image

banner+Imageloader輪播圖2

1.匯入依賴 implementation 'com.youth.banner:banner:1.4.9' 2.佈局 <com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match

Android使用banner實現輪播圖

新增依賴 Glide ： implementation 'com.github.bumptech.glide:glide:3.7.0' Banner： implementation 'com.youth.banner:banner:1.4.9' 請求網路

Vue開發音樂移動端實戰(1) —header頭部元件開發和swiper輪播圖開發 以及利用JSONP獲取QQ音樂輪播圖資料

首先做專案配置 安裝babel-polyfill這是es6語法轉化（在路由中引用的）babel-fastclick 去除移動端click點選的300毫秒延遲（在路由中index.js下寫入）import fastclick from 'fastclick'//引用 fastc

3、自定義view初體驗：設定列表頁展示（組合控制元件）

漆可的部落格 1、 前言 當我們拿到設計圖，看到有多個佈局比較類似的地方如下圖中的微信設定列表頁，每一個列表都相類似，我們就可以考慮採用組合控制元件自定義view來展示，這樣做的好處是，可以簡化佈局，便於統一管理，後期維護修改更加方便簡單。 組

android開發：自定義組合控制元件

內容介紹 本文記錄，自定義組合控制元件，為了可以程式碼複用，減少程式碼量 配置控制元件屬性檔案 開啟res/values/目錄下的arss.xml檔案，新增下面屬性程式碼，如果沒有建立arrs.xml檔案。 <?xml version="1.0" enc