1. 程式人生 > >類似網易新聞首頁的輪播圖,寫了個自創的框架

類似網易新聞首頁的輪播圖,寫了個自創的框架

1、 首先寫個UI,copy那個220dip的Relatelayout到你的工程中

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="mrzhou.com.viewpager_demo.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="220dip">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="40dip"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="#66000000"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:paddingTop="5dip"
                android:singleLine="true"
                android:text="此圖無描述..."
                android:textColor="#fff"/>

            <LinearLayout
                android:id="@+id/ll_point_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dip"
                android:gravity="center"
                android:orientation="horizontal">
            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>
</RelativeLayout>


2、然後配置一下許可權,因為在點選圖片的時候要跳轉頁面到網路上

<uses-permission android:name="android.permission.INTERNET"/>

3、把圖片放到你的drawable目錄下,(沒有圖片到下面地址下載,這個壓縮包裡面有幾張圖片)

並且到 這個地方下載  http://pan.baidu.com/s/1sl5n9lr     ,下載下來後

一個selector和兩個shape的xml檔案下載下來後放到drawable目錄下

兩個java檔案放到你的工程src目錄下

4、到這裡基本差不多了,然後開始寫主要程式碼了

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewpager;
    private TextView mTv;
    private LinearLayout mLl_point_container;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //去掉標題欄
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化輪播圖
        init();

    }

    private void init() {
        ViewPager_utils viewPager = new ViewPager_utils(MainActivity.this);

        mViewpager = (ViewPager) findViewById(R.id.viewpager);
        mTv = (TextView) findViewById(R.id.tv);
        mLl_point_container = (LinearLayout) findViewById(R.id.ll_point_container);
        //點選圖片,跳轉的網頁地址
        String[] url = {"http://baidu.com", "http://www.jd.com", "http://www.sina.com.cn/", "http://www.163.com/", "http://weixin.qq.com/"};

        viewPager.initView(mViewpager, mTv, mLl_point_container, url);

        //輪播圖下面對應的簡述
        String[] sub = new String[]{"鞏俐不低俗,我就不能低俗", "撲樹又回來啦!再唱經典老歌引萬人大合唱", "揭祕北京電影如何升級", "樂視網TV版大派送", "熱血屌絲的反殺"};
        
        //圖片Id,尺寸寬度和高度  320dip:220dip 這麼一個比值不容易失真
        int[] img = new int[]{R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e};
        viewPager.initData(sub, img);

    }

}


ok,大功告成

跑一下




大概是這樣,一個小Demo,如果要從網路下載圖片的話,三級快取下來然後調一下即可