[android] 輪播圖-滑動圖片標題焦點

谷歌提供的v4包,ViewPagerjava

在佈局文件中,先添加<android.support.v4.view.ViewPager/>控件,這個只是輪播的區域android

 

在佈局文件中,佈置標題描述部分數組

線性佈局,豎向排列,背景色黑色半透明,這個佈局和上面的ViewPager底部對齊layout_alignBottom=」@id/xxx」app

<TextView/>居中顯示,ide

小點部分,先放過空的LinearLayoutidll_points在代碼中對其進行填充佈局

 

獲取ViewPager對象this

調用ViewPager對象的setAdapter()方法,參數:PagerAdapter對象spa

由於PagerAdapter是抽象類,定義一個MyPagerAdapter繼承PagerAdapter,實現如下方法code

重寫getCount()方法,返回輪播的個數xml

重寫isViewFromObject()方法,返回布爾值,

重寫instantiateItem()方法,將當前view對象添加到ViewGroup對象,返回當前對象

重寫destroyItem()方法,從當前container中刪除指定位置(position)的View

 

切換描述標題字符串

定義一個String[]數組,保存標題

調用ViewPager對象的setOnPagerChangeListener()方法,參數:OnPagerChangeListener對象

匿名內部類實現,重寫如下方法

onPageSelected()方法,頁面切換後調用,傳遞進參數,int索引

onPageScrolled()方法,當頁面正在滾動的時候

onPageScrollStateChanged()方法,當頁面滾動狀態改變的時候

 

小圖標部分

新建兩個shape文件,使用xml畫兩個原點

添加節點<shape>,設置形狀爲原型android:shape=」oval」

添加尺寸節點<size> ,設置寬度,高度,android:width=」」 android:height=」」

添加顏色節點<solid>,設置顏色 android:color=」」

正常狀況下,灰色點,焦點的時候,白色的點,兩個xm文件的顏色不同

point.xml

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

    <size
        android:height="4dp"
        android:width="4dp" />
    <solid android:color="#aaffffff"/>

</shape>

point_write.xml

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

    <size
        android:height="4dp"
        android:width="4dp" />
    <solid android:color="#ffffffff"/>

</shape>

 

 

新建一個selector文件,當圖片enable的時候白色的點,不可用的時候灰色的點,不一樣的狀態不一樣的圖片

添加<selector>節點

添加<item>節點,設置圖片屬性android:drawable=」」 設置狀態android:enabled=」true|false」

point_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/point" android:state_enabled="false"></item>
    <item android:drawable="@drawable/point_write" android:state_enabled="true"></item>
</selector>

 

 

 

循環大圖片的個數,建立ImageView對象,

調用ImageView對象setImageResource()方法,設置資源,參數:selector文件

調用ImageView對象的setLayoutParams()方法,給小圖標ImageView對象添加一些margin值,參數:LayoutParams對象,獲取LinearLayout.LayoutParams對象,調用LayoutParams對象的rightMargin()方法,設置margin

調用ImageView對象的setEnabled()方法,設置是否可用,參數:布爾值

 

獲取LinearLayout對象,調用LinearLayout對象的addView()方法,把小圖標的視圖填進去,參數:ImageView對象

 

默認第一個是焦點,隨着圖片滑動,焦點跟着改變

package com.tsh.myviewpager;

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

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {
    private ViewPager vp_banner;
    private LinearLayout ll_points;
    private TextView tv_title;
    private List<View> banners;
    private String[] titles=new String[]{
            "新聞標題1",
            "新聞標題2",
            "新聞標題3"
    };
    private List<ImageView> points=new ArrayList<ImageView>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 初始化
        vp_banner = (ViewPager) findViewById(R.id.vp_banner);
        ll_points = (LinearLayout) findViewById(R.id.ll_points);
        tv_title = (TextView) findViewById(R.id.tv_title);
        
        // banner部分
        banners = new ArrayList<>();
        ImageView img1 = new ImageView(this);
        img1.setImageResource(R.drawable.a);
        banners.add(img1);
        ImageView img2 = new ImageView(this);
        img2.setImageResource(R.drawable.b);
        banners.add(img2);
        ImageView img3 = new ImageView(this);
        img3.setImageResource(R.drawable.c);
        banners.add(img3);
        
        //小圖標
        ll_points=(LinearLayout) findViewById(R.id.ll_points);
        for(int i=0;i<banners.size();i++){
            ImageView image=new ImageView(this);
            image.setImageResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(5, 5);
            params.rightMargin=4;
            image.setLayoutParams(params);
            ll_points.addView(image);
            if(i==0){
                image.setEnabled(true);
            }else{
                image.setEnabled(false);
            }
            points.add(image);
        }
        
        // 設置適配器
        vp_banner.setAdapter(new MyPagerAdapter());
        vp_banner.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int arg0) {
                tv_title.setText(titles[arg0]);
                //小圖標處理
                for(ImageView point:points){
                    point.setEnabled(false);
                }
                points.get(arg0).setEnabled(true);
            }
            
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
    }

    private class MyPagerAdapter extends PagerAdapter {
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(banners.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(banners.get(position));
            return banners.get(position);
        }

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

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }
    }
}
相關文章
相關標籤/搜索