利用MVC編寫廣告條輪播效果
我理解的安卓中MVC思想是利用Holder進行編程,展示布局,提供視圖,將視圖和數(shù)據(jù)進行綁定起來,在很多App中我們能見到廣告條,廣告條這里我們可以使用FramLayout進行填充,然后利用MVC的思想將提供的布局添加到FrameLayout中即可; 廣告條的實現(xiàn)也可以利用Banner等開源框架等,這里就不列舉了,感興趣的朋友可以去搜下
當然由于我這里的項目的圖片是設(shè)計師那邊提供好的,并不是從網(wǎng)上獲取的,所以我這里就直接寫了ViewPager來進行填充了
<!--輪播圖--> <RelativeLayout android:layout_width="match_parent" android:layout_height="328px"> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_work_pic_viewpager"/> <!-- 指針容器 --> <RelativeLayout android:background="@android:color/transparent" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp" android:layout_alignBottom="@id/fragment_work_pic_viewpager"> <!--<TextView android:textSize="12sp" android:layout_gravity="left" android:layout_marginLeft="5dp" android:id="@+id/tv_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/white" android:text="圖片的描述"/>--> <LinearLayout android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:id="@+id/ll_dots" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> </LinearLayout> </RelativeLayout>
邏輯:
package com.hanzheng.znxl.fragment; import android.support.v4.view.ViewPager; import android.view.MotionEvent; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import com.hanzheng.znxl.R; import com.hanzheng.znxl.adapter.OnPagerChangeListenerImp; import com.hanzheng.znxl.adapter.WorkFragmentBannerAdapter; import com.hanzheng.znxl.base.BaseFragment; import com.hanzheng.znxl.base.MyApplication; import com.hanzheng.znxl.utils.ToastUtil; import butterknife.Bind; import butterknife.ButterKnife; import butterknife.OnClick; /** * Created by zmybi on 29/12/2016. */ public class WorkFragment extends BaseFragment { @Bind(R.id.fragment_work_pic_viewpager) ViewPager mFragmentWorkPicViewpager; @Bind(R.id.ll_dots) LinearLayout mLLDots; // @Bind(R.id.tv_desc) // TextView mTvDesc; @Bind(R.id.ll_kaoqing) LinearLayout mLlKaoqing; @Bind(R.id.ll_execute) LinearLayout mLlExecute; @Bind(R.id.ll_daohang) LinearLayout mLlDaohang; @Bind(R.id.ll_sudden) LinearLayout mLlSudden; @Bind(R.id.ll_policething) LinearLayout mLlPolicething; @Bind(R.id.ll_collect) LinearLayout mLlCollect; @Bind(R.id.ll_search) LinearLayout mLlSearch; @Bind(R.id.ll_noticevoice) LinearLayout mLlNoticevoice; @Bind(R.id.iv_book) ImageView mIvBook; @Bind(R.id.rl_shouce) RelativeLayout mRlShouce; @Bind(R.id.ibtn_yuan) ImageView mIbtnYuan; @Bind(R.id.ibtn_helpbook) ImageView mIbtnHelpbook; private int[] imageResIds = {R.drawable.banner1,R.drawable.banner2}; private String[] descs = {"武漢保安集團","智能巡邏系統(tǒng)"}; private AutoScrollTask mAutoScrollTask; @Override public void initData() { mFragmentWorkPicViewpager.addOnPageChangeListener(new OnPagerChangeListenerImp() { @Override public void onPageSelected(int position) { changeDotAndDesc(position); } }); mFragmentWorkPicViewpager.setAdapter(new WorkFragmentBannerAdapter(imageResIds)); initDot(); changeDotAndDesc(0); //默認選擇第一頁 mFragmentWorkPicViewpager.setCurrentItem(mFragmentWorkPicViewpager.getAdapter().getCount() / 2); if(mAutoScrollTask == null) { mAutoScrollTask = new AutoScrollTask(); mAutoScrollTask.start(); } //按下去停止輪播 mFragmentWorkPicViewpager.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { switch (motionEvent.getAction()) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: mAutoScrollTask.stop(); break; case MotionEvent.ACTION_UP: mAutoScrollTask.start(); break; } return false; } }); } private void changeDotAndDesc(int position) { position = position % imageResIds.length; // mTvDesc.setText(descs[position]); for(int i = 0; i < mLLDots.getChildCount();i++) { ImageView iv_dot = (ImageView) mLLDots.getChildAt(i); iv_dot.setSelected(false); if(position == i) { iv_dot.setSelected(true); } } } private void initDot() { for(int i = 0; i < imageResIds.length;i++) { int _5dp = dp2px(5); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(_5dp,_5dp); params.leftMargin = _5dp; ImageView dot = new ImageView(mActivity); dot.setLayoutParams(params); dot.setBackgroundResource(R.drawable.selector_dot); mLLDots.addView(dot); } } public int dp2px(int dp) { float density = getResources().getDisplayMetrics().density; return (int) (dp * density + .5f); } @Override public View initView() { // TODO: inflate a fragment view View rootView = View.inflate(mActivity,R.layout.fragment_work,null); ButterKnife.bind(this, rootView); return rootView; } @Override public void onDestroyView() { super.onDestroyView(); ButterKnife.unbind(this); } @OnClick({R.id.rl_shouce,R.id.ibtn_yuan, R.id.ibtn_helpbook,R.id.ll_kaoqing, R.id.ll_execute, R.id.ll_daohang, R.id.ll_sudden, R.id.ll_policething, R.id.ll_collect, R.id.ll_search, R.id.ll_noticevoice}) public void onClick(View view) { switch (view.getId()) { case R.id.ll_kaoqing: ToastUtil.showToast(mActivity,"考勤"); break; case R.id.ll_execute: ToastUtil.showToast(mActivity,"勤務(wù)"); break; case R.id.ll_daohang: ToastUtil.showToast(mActivity,"網(wǎng)店"); break; case R.id.ll_sudden: ToastUtil.showToast(mActivity,"突發(fā)"); break; case R.id.ll_policething: ToastUtil.showToast(mActivity,"警情"); break; case R.id.ll_collect: ToastUtil.showToast(mActivity,"認證"); break; case R.id.ll_search: ToastUtil.showToast(mActivity,"信息查詢"); break; case R.id.ll_noticevoice: ToastUtil.showToast(mActivity,"發(fā)布公告"); break; case R.id.rl_shouce: ToastUtil.showToast(mActivity,"手冊"); break; case R.id.ibtn_yuan: ToastUtil.showToast(mActivity,"預(yù)案流程"); break; case R.id.ibtn_helpbook: ToastUtil.showToast(mActivity,"幫助手冊"); break; } } private class AutoScrollTask implements Runnable{ public void start() { stop(); MyApplication.getMainThreadHandler().postDelayed(this,2000); } public void stop() { MyApplication.getMainThreadHandler().removeCallbacks(this); } @Override public void run() { int currentItem = mFragmentWorkPicViewpager.getCurrentItem(); currentItem++; mFragmentWorkPicViewpager.setCurrentItem(currentItem); start(); } } }
這里輪播圖下方的指示器(小點)或者圖片描述都是可以加上的, 具體依據(jù)公司美工的要求即可
做了個按下去停止輪播的優(yōu)化; 給viewpager設(shè)計點擊監(jiān)聽,重寫三個方法, 抬起則start(), 走run方法viewpager跳到下一頁,并走AutoScrollTask中的start(),方法,主線程的Handler發(fā)送延時消息,則繼續(xù)循環(huán)run方法, 實現(xiàn)輪播圖的無線循環(huán)
對了,說下輪播圖的PagerAdapter的寫法
package com.hanzheng.znxl.adapter; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; /** * Created by zmybi on 31/12/2016. */ public class WorkFragmentBannerAdapter extends PagerAdapter { private int[] imageResIds; public WorkFragmentBannerAdapter(int[] imageResIds) { this.imageResIds = imageResIds; } @Override public int getCount() { return imageResIds.length * 1000000; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView iv = new ImageView(container.getContext()); position = position % imageResIds.length; iv.setBackgroundResource(imageResIds[position]); iv.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(iv); return iv; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((ImageView)object); } }
這里返回一個很大的數(shù),其實也沒必要返回Integer.MAX_VALUE; 因為這樣寫的話還要對余數(shù)進行判斷,讓下方的Indicator和上方的圖片切換保持一致, 當然,這里由于美工直接給的圖,所以我直接放在工程下了,實際如果是從網(wǎng)上獲取的,則使用Picasso或者Glide圖片加載框架即可
至此,一個簡單的圖片輪播功能就已經(jīng)實現(xiàn)了。
相關(guān)文章
Android ViewGroup事件分發(fā)和處理源碼分析
這篇文章主要為大家介紹了Android ViewGroup事件分發(fā)和處理源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02Android獲取手機聯(lián)系人電話號碼并返回結(jié)果
這篇文章主要為大家詳細介紹了Android獲取手機聯(lián)系人電話號碼并返回結(jié)果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11Android使用Matrix旋轉(zhuǎn)圖片模擬碟片加載過程
這篇文章主要為大家詳細介紹了Android使用Matrix旋轉(zhuǎn)圖片模擬碟片加載過程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03Android自定義ViewGroup實現(xiàn)標簽浮動效果
這篇文章主要為大家詳細介紹了Android自定義ViewGroup實現(xiàn)標簽浮動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-06-06Android實現(xiàn)微信朋友圈評論EditText效果
這篇文章主要為大家詳細介紹了Android實現(xiàn)微信朋友圈評論EditText效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11Android多功能時鐘開發(fā)案例(實戰(zhàn)篇)
這篇文章主要為大家詳細介紹了Android多功能時鐘開發(fā)案例,開發(fā)了時鐘、鬧鐘、計時器和秒表,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05