Android學習筆記(二)--ViewPager的使用(輪播功能的實現)
阿新 • • 發佈:2019-02-02
是否覺得只有幾個按鈕和幾個View有點太單一呢,頁面上怎麼能只顯示這麼少的內容呢?沒關係,ViewPager來幫忙。(聽說已經過時,但還是看一下吧,總是相通的)這裡是參考了《第一行程式碼》一書。
先上程式碼。
MainActivity.java
package com.example.viewpagertry;
import android.app.Activity;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ViewPager pager=new ViewPager(this);
pager.setAdapter(new ImagePagerAdapter(this));
setContentView(pager);
}
}
ImagePagerAdapter.java
package com.example.viewpagertry;
import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class ImagePagerAdapter extends PagerAdapter {
private Context mcontext;
private static final int[] IMAGES={
android.R.drawable.ic_menu_camera,
android.R.drawable.ic_menu_add,
android.R.drawable.ic_menu_delete,
android.R.drawable.ic_menu_share,
android.R.drawable.ic_menu_edit
};
private static final int[] COLORS={
Color.RED,Color.BLUE,Color.GREEN,Color.GRAY,Color.MAGENTA
};
private static final String[] Content={
"aa","bb","cc","dd","ee"
};
public ImagePagerAdapter(Context context){
super();
mcontext=context;
}
@Override
public int getCount(){
return IMAGES.length;
}
@Override
public float getPageWidth(int position){
return 1f;
}
@Override
public Object instantiateItem(ViewGroup container,int position) {
ImageView imageView = new ImageView(mcontext);
imageView.setImageResource(IMAGES[position]);
imageView.setBackgroundColor(COLORS[position]);
TextView textView=new TextView(mcontext);
textView.setText(Content[position]);
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container,int position,Object object){
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view,Object object){
return (view==object);
}
}
剛入門的同學可能覺得Adapter這個東西有點虛無縹緲,其實就是一個介面卡,用來告訴.xml什麼位置該顯示什麼內容,擴充套件性強,太自由就是它的難點吧。如上的程式碼執行起來就是一個可以左右滑動的頁面了,我這裡嗎只是設計了幾張簡單的圖片和背景顏色,必須通過手動滑動來檢視頁面,如果想要更復雜的都可通過自定義來實現,繼續向下看。這樣翻頁的效果如果再 配上一個Timer 和setCurrentiem就可以完成了一個輪播,就想淘寶和各種新聞客戶端上的一樣,迴圈顯示資訊。但是總感覺少了點什麼,後來一番思考,又做了個小圓點,隨著滑動,來變化。想法比較粗糙,可能效率也不太高,以後想到了再來更新。
附完整程式碼。
更改後的完整的activity如下。adapter還是上面的那個,沒有進行更改。
package com.example.viewpagertry;
import android.app.Activity;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity {
private Handler handler;
private Thread thread;
private ViewPager viewPager;
private LinearLayout ll_dot;
private Context context;
private int s=0;
List<ImageView> dots = new ArrayList<ImageView>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context=this;
viewPager=(ViewPager)findViewById(R.id.viewpager);
ImagePagerAdapter adapter=new ImagePagerAdapter(context);
ll_dot = (LinearLayout) findViewById(R.id.ll_dot);
viewPager.setAdapter(adapter);
initdot(s);
thread=new Thread(){
public void run(){
while (true){
try {
Thread.sleep(3000); //等待輪播 3秒
} catch (InterruptedException e) {
e.printStackTrace();
}
Message.obtain(handler,0,"").sendToTarget();
}
}
};
thread.start();
handler = new Handler() {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case 0:
int i=viewPager.getCurrentItem();
if (i==4){
viewPager.setCurrentItem(0);
initdot(0);
}else{
i++;
viewPager.setCurrentItem(i);
initdot(i);
}
break;
default:
break;
}
}
};
}
private void initdot(int k) {
ll_dot.removeAllViews();
for (int i = 0; i <5; i++) {
ImageView img = new ImageView(this);
if (i == k) {
img.setImageResource(R.drawable.point_checked);
} else {
img.setImageResource(R.drawable.point_normal);
}
FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(50, 50);
params.setMargins(5, 0, 5, 5);
// 載入到佈局容器
ll_dot.addView(img, params);
dots.add(img);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
thread.stop();
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
thread.start();
break;
}
return super.onTouchEvent(ev);
}
}
裡面用的兩個drawable
point_checked
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="8dp" />
<solid android:color="#fff" >
</solid>
</shape>
point_normal
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:radius="8dp" />
<solid android:color="#fff" >
</solid>
</shape>
中間的Activity我重寫了一個觸控事件,就是要在手動更改Viewpager的時候,讓負責輪播的執行緒停下來,否則還會繼續輪播,達不到想要的效果。繪圖是一項很重要的技能,發現自己很薄弱,還需改正。