(一):寫在前面的話
接著上一篇繼續(xù)更新，上一篇文章已經(jīng)把FastDev4Android項目做了大體的了解，包括項目結(jié)構(gòu)已經(jīng)需要進(jìn)行完善的功能，那么今天我們繼續(xù)完善這個項目；今天我們主要將的是實現(xiàn)一個首頁自動無限循環(huán)組件我這邊采用的是Gallery(重寫)+FlowIndicator(自定義)；
項目地址
成都創(chuàng)新互聯(lián)公司服務(wù)熱線：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)公司網(wǎng)頁制作領(lǐng)域10余年，包括成都木包裝箱等多個行業(yè)擁有豐富的網(wǎng)站營銷經(jīng)驗，選擇成都創(chuàng)新互聯(lián)公司，為企業(yè)錦上添花。
(二)Gallery控件講解
2.1:說明-實現(xiàn)效果如下:
Gallery為畫廊控件相信大家對此非常熟悉，同時這個Gallery組件已經(jīng)早就過時了，雖然官方說這個組件會造成內(nèi)存過大，緩存機制不行，或者說緩存機制完全不行，不過如果作為初級階段要實現(xiàn)自動輪播用這個練手還是非常方便的。雖然現(xiàn)在一般可以采用viewpager或者RecyleView來進(jìn)行實現(xiàn),后面我們還會更新viewpager和recyleview實現(xiàn)的圖片輪播組件;
2.2:實現(xiàn)方式:
要實現(xiàn)圖片的自動無限輪播,那么最重要要實現(xiàn)自動輪播的功能，在Gallery我們只需要實現(xiàn)一個定時器,每個一段時間調(diào)用Gallery的方法來切換圖片如下:
接著在定時器中直接調(diào)用onkeydown讓gallery來切換圖片,我們來看一下onkeydown的方法：
/**
* Handles left, right, and clicking
* @see android.view.View#onKeyDown
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_DPAD_LEFT: if (moveDirection(-1)) {
playSoundEffect(SoundEffectConstants.NAVIGATION_LEFT); return true;
} break; case KeyEvent.KEYCODE_DPAD_RIGHT: if (moveDirection(1)) {
playSoundEffect(SoundEffectConstants.NAVIGATION_RIGHT); return true;
} break; case KeyEvent.KEYCODE_DPAD_CENTER: case KeyEvent.KEYCODE_ENTER:
mReceivedInvokeKeyDown = true; // fallthrough to default handling
} return super.onKeyDown(keyCode, event);
}12345678910111213141516171819202122232425262728上邊的源代碼我們可以很清晰看到KEYCODE_DPAD_LEFT，KEYCODE_DPAD_RIGHT這兩個參數(shù)，OK那么我們在調(diào)用onkeydown傳入?yún)?shù)的時候傳入這兩個值就OK了。那么我們該如果設(shè)置這兩個參數(shù)呢？其實很簡單gallery是提供我們手指滑動來切換的,也就是Gallery實現(xiàn)了GestureDetector.OnGestureListener手勢接口,那么我們可以重寫onFing方法判斷是向左還是向右滑動，代碼如下:
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { int kEvent; if (isScrollingLeft(e1, e2)) {
kEvent = KeyEvent.KEYCODE_DPAD_LEFT; //設(shè)置手勢滑動的方法 --向左
} else {
kEvent = KeyEvent.KEYCODE_DPAD_RIGHT; //設(shè)置手勢滑動的方法--向右
}
onKeyDown(kEvent, null); //進(jìn)行設(shè)置galler切換圖片
if (this.getSelectedItemPosition() == 0) { this.setSelection(length);
} return false;
}123456789101112131415下面我們來看一下AutoGallery的源代碼，詳細(xì)了解一下實現(xiàn)方法:
package com.chinaztt.fda.widget;import android.content.Context;import android.util.AttributeSet;import android.view.KeyEvent;import android.view.MotionEvent;import android.view.View;import android.widget.Gallery;import java.util.Timer;import java.util.TimerTask;/**
* 當(dāng)前類注釋:重寫Gallery對畫廊控件進(jìn)行重寫，擴展成可以自動切換圖片Gallery
* 這個圖片輪播控件還是比較之前封裝的，現(xiàn)在一般采用viewpager進(jìn)行封裝，后面我這邊也會介紹
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.widget
* 作者：江清清 on 15/10/23 08:41
* 郵箱：jiangqqlmj@163.com
* QQ： 781931404
* 公司：江蘇中天科技軟件技術(shù)有限公司
*/public class AutoGallery extends Gallery implements View.OnTouchListener {
//畫廊圖片的數(shù)量
private int length; //自動切換圖片的時間
private long delayMillis = 5000; //定時器
private Timer timer = null; public AutoGallery(Context context) { super(context);
setOnTouchListener(this);
} public AutoGallery(Context context, AttributeSet attrs) { super(context, attrs);
setOnTouchListener(this);
} public AutoGallery(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle);
setOnTouchListener(this);
} public int getLength() { return this.length;
} public void setLength(int length) { this.length = length;
} public void setDelayMillis(long delayMillis) { this.delayMillis = delayMillis;
} /**
* 重寫Galler中手指滑動的手勢方法
* @param e1
* @param e2
* @param velocityX
* @param velocityY
* @return
*/
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { int kEvent; if (isScrollingLeft(e1, e2)) {
kEvent = KeyEvent.KEYCODE_DPAD_LEFT; //設(shè)置手勢滑動的方法 --向左
} else {
kEvent = KeyEvent.KEYCODE_DPAD_RIGHT; //設(shè)置手勢滑動的方法--向右
}
onKeyDown(kEvent, null); //進(jìn)行設(shè)置galler切換圖片
if (this.getSelectedItemPosition() == 0) { this.setSelection(length);
} return false;
} /**
* 進(jìn)行判斷滑動方向
* @param e1
* @param e2
* @return
*/
private boolean isScrollingLeft(MotionEvent e1, MotionEvent e2) { return e2.getX() > e1.getX();
} /**
* 開啟定時器
*/
public void start() { if (length > 0&&timer == null) {
timer = new Timer(); //進(jìn)行每個delayMillis時間gallery切換一張圖片
timer.scheduleAtFixedRate(new TimerTask() { @Override
public void run() { if (length > 0) {
onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, null);
}
}
}, delayMillis, delayMillis);
}
} /**
* 關(guān)閉定時器
*/
public void stop() { if (timer != null) {
timer.cancel();
timer = null;
}
} /**
* 重寫手指觸摸的事件，當(dāng)手指按下的時候，需要關(guān)閉gallery自動切換
* 當(dāng)手指抬開得時候 需要打開gallery自動切換功能
* @param v
* @param event
* @return
*/
@Override
public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN:
stop(); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL:
start(); break;
} return false;
}
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140(三)FlowIndicator控件講解
3.1:實現(xiàn)效果:
3.2:指示器是一個自定義的view,通過實時的繪制,首先我們需要定義圓點的attrs屬性文件如下:
12345678
然后我們在FlowDicator中進(jìn)行獲取到相關(guān)屬性，并且進(jìn)行繪制ondraw即可，不過在繪制的時候需要判斷以下當(dāng)前是否選中，這樣分別繪制選中和未選中的原點;
@Override
protected void onDraw(Canvas canvas) { super.onDraw(canvas); float width = (getWidth() - ((radius * 2 * count) + (space * (count - 1)))) / 2.f;
Log.d(TAG_FLOWINDICATOR,"當(dāng)前選中的為:"+this.seleted); for (int i = 0; i < count; i++) { if (i == seleted) {
paint.setStyle(Style.FILL);
canvas.drawBitmap(bmp_selected, 130+width + getPaddingLeft()
+ radius + i * (space + radius + radius), 0, null);
} else {
paint.setStyle(Style.FILL);
canvas.drawBitmap(bmp_normal, 130+width + getPaddingLeft() + radius
+ i * (space + radius + radius), 0, null);
}
}
}1234567891011121314151617 3.3:具體實現(xiàn)代碼,FlowIndicator.java
package com.chinaztt.fda.widget;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.view.View;import com.chinaztt.fda.ui.R;import com.chinaztt.fda.utils.Log;/**
* 自動播放Gallery指示器
* @author jiangqq
*
*/public class FlowIndicator extends View {
private static final String TAG_FLOWINDICATOR="FlowIndicator"; private int count; private float space, radius; private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); private Bitmap bmp_selected, bmp_normal; // 選中
private int seleted = 0; public FlowIndicator(Context context, AttributeSet attrs) { super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.FlowIndicator); //小圓點數(shù)量
count = a.getInteger(R.styleable.FlowIndicator_count, 4); //每個小圓點間隔距離
space = a.getDimension(R.styleable.FlowIndicator_space, 4); //小圓點半徑
radius = a.getDimension(R.styleable.FlowIndicator_radius, 7); //正常 沒有選中的圖片
bmp_normal = BitmapFactory.decodeResource(getResources(),
R.drawable.hui); //選中的圖片
bmp_selected = BitmapFactory.decodeResource(getResources(),
R.drawable.lan);
a.recycle();
} //當(dāng)前選中的索引，并且重繪指示器view
public void setSeletion(int index) { this.seleted = index;
invalidate();
} //設(shè)置指示器的數(shù)量
public void setCount(int count) { this.count = count;
invalidate();
} //設(shè)置指示器 下一個圓點
public void next() { if (seleted < count - 1)
seleted++; else
seleted = 0;
invalidate();
} //設(shè)置指示器 前一個圓點
public void previous() { if (seleted > 0)
seleted--; else
seleted = count - 1;
invalidate();
} /**
* 重寫繪制指示器view
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) { super.onDraw(canvas); float width = (getWidth() - ((radius * 2 * count) + (space * (count - 1)))) / 2.f;
Log.d(TAG_FLOWINDICATOR,"當(dāng)前選中的為:"+this.seleted); for (int i = 0; i < count; i++) { if (i == seleted) {
paint.setStyle(Style.FILL);
canvas.drawBitmap(bmp_selected, 130+width + getPaddingLeft()
+ radius + i * (space + radius + radius), 0, null);
} else {
paint.setStyle(Style.FILL);
canvas.drawBitmap(bmp_normal, 130+width + getPaddingLeft() + radius
+ i * (space + radius + radius), 0, null);
}
}
} /**
* 進(jìn)行view大小的測量
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureWidth(widthMeasureSpec),
measureHeight(heightMeasureSpec));
} private int measureWidth(int measureSpec) { int result = 0; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = (int) (getPaddingLeft() + getPaddingRight()
+ (count * 2 * radius) + (count - 1) * radius + 1); if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
} return result;
} private int measureHeight(int measureSpec) { int result = 0; int specMode = MeasureSpec.getMode(measureSpec); int specSize = MeasureSpec.getSize(measureSpec); if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
} else {
result = (int) (2 * radius + getPaddingTop() + getPaddingBottom() + 1); if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
} return result;
}
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142(四):該組件的使用方法
我們創(chuàng)建布局文件使用當(dāng)前組件的包名路徑，然后進(jìn)行初始化并且設(shè)置數(shù)據(jù)，最后綁定事件監(jiān)聽器即可;
package com.chinaztt.fda.test;import android.os.Bundle;import android.os.PersistableBundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.BaseAdapter;import android.widget.ImageView;import com.chinaztt.fda.ui.R;import com.chinaztt.fda.ui.base.BaseActivity;import com.chinaztt.fda.widget.AutoGallery;import com.chinaztt.fda.widget.FlowIndicator;/**
* 當(dāng)前類注釋: 圖片輪播封裝類的簡單使用
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.test
* 作者：江清清 on 15/10/23 08:35
* 郵箱：jiangqqlmj@163.com
* QQ： 781931404
* 公司：江蘇中天科技軟件技術(shù)有限公司
*/public class GalleryIndicatorActivity extends BaseActivity{
private LayoutInflater mInflater; private int[] mImages; private AutoGallery headline_p_w_picpath_gallery; //自動圖片輪播Gallery
private FlowIndicator galleryFlowIndicator; //指示器控件
private int circleSelectedPosition = 0; // 默認(rèn)指示器的圓圈的位置為第一項
private int gallerySelectedPositon = 0; // 默認(rèn)gallery的圖片為第一張
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.gallery_indicator_layout);
mInflater=getLayouInflater();
mImages=new int[]{
R.drawable.one,
R.drawable.two,
R.drawable.three,
R.drawable.four
};
headline_p_w_picpath_gallery=(AutoGallery)this.findViewById(R.id.headline_p_w_picpath_gallery);
galleryFlowIndicator=(FlowIndicator)this.findViewById(R.id.headline_circle_indicator); int topSize = mImages.length; //設(shè)置指示器圓點的數(shù)量
galleryFlowIndicator.setCount(topSize); //設(shè)置當(dāng)前的位置
galleryFlowIndicator.setSeletion(circleSelectedPosition); //設(shè)置畫廊 圖片的數(shù)量
headline_p_w_picpath_gallery.setLength(topSize);
headline_p_w_picpath_gallery.setAdapter(new GalleryIndicatorAdapter());
gallerySelectedPositon = topSize * 20 + circleSelectedPosition; //設(shè)置畫廊當(dāng)前所指的位置 索引
headline_p_w_picpath_gallery.setSelection(gallerySelectedPositon);
headline_p_w_picpath_gallery.start(); //gallery滾動選擇監(jiān)聽
headline_p_w_picpath_gallery
.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override
public void onItemSelected(AdapterView parent,
View view, int position, long id) {
gallerySelectedPositon = position;
circleSelectedPosition = position
% headline_p_w_picpath_gallery.getLength();
galleryFlowIndicator
.setSeletion(circleSelectedPosition);
} @Override
public void onNothingSelected(AdapterView parent) {
}
}); //gallery點擊選中事件
headline_p_w_picpath_gallery.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override
public void onItemClick(AdapterView parent, View view, int position, long id) { int index=position
% headline_p_w_picpath_gallery.getLength()+1;
showToastMsgShort("點擊了第"+index+"個圖片!");
}
});
}
class GalleryIndicatorAdapter extends BaseAdapter{ @Override
public int getCount() { return Integer.MAX_VALUE;
} @Override
public Object getItem(int position) { return mImages[position];
} @Override
public long getItemId(int position) { return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
Hondler _Hondler=null; if(convertView==null){
_Hondler=new Hondler();
convertView=mInflater.inflate(R.layout.headline_gallery_item,null);
_Hondler.headline_gallery_p_w_picpathview=(ImageView)convertView.findViewById(R.id.headline_gallery_p_w_picpathview);
convertView.setTag(_Hondler);
}else
{
_Hondler=(Hondler)convertView.getTag();
} int mPosition = position % mImages.length;
_Hondler.headline_gallery_p_w_picpathview.setImageResource(mImages[mPosition]); return convertView;
}
} static class Hondler{
ImageView headline_gallery_p_w_picpathview;
}
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127上面是該組件的基本使用方法，由于篇幅的原因，布局文件這類我這邊就沒有貼上去，主要講解了控件的主要實現(xiàn)方法，如果需要具體了解該項目和該組件可以去github中clone一下代碼；
項目地址如下:https://github.com/jiangqqlmj/FastDev4Android
網(wǎng)站標(biāo)題：【FastDev4Android框架開發(fā)】Android首頁圖片自動無限循環(huán)輪播Gallery+FlowIndicator(二)
文章分享：
http://weahome.cn/article/iejicp.html
重慶分公司
重慶分公司
