利用MVC編寫廣告條輪播效果

更新時間：2017年12月12日 11:24:06 作者：zmybiealex

這篇文章主要為大家詳細介紹了利用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)了。

您可能感興趣的文章: