登錄頁背景圖緩慢滾動實現(xiàn)方法
[導(dǎo)讀]1.需求：需要實現(xiàn)在登錄頁，有一個大圖緩慢滾動2.思路：大圖本身是幾千像素的寬度，不可能直接加載，會OOM報錯；所以應(yīng)該是切成同樣高度和寬度的較小的圖片（盡量）3.資料（轉(zhuǎn)載文章）：https://w
1.需求：需要實現(xiàn)在登錄頁，有一個大圖緩慢滾動
2.思路：大圖本身是幾千像素的寬度，不可能直接加載，會OOM報錯；所以應(yīng)該是切成同樣高度和寬度的較小的圖片（盡量）
3.資料（轉(zhuǎn)載文章）：https://www.jianshu.com/p/f36f68c3de46,這篇文章算是思路對的了，但是跑出來的效果不是我想要的，所以需要做魔改~
4.魔改（開玩笑~）
我先說下上面那個大佬寫的文章里我遇到的問題和解決辦法，最后會貼上我自己的代碼，GIF不會弄，但是我已經(jīng)在自己的APP上實現(xiàn)了這個效果，應(yīng)該是可以的
(1)MarqueeView里的addViewInQueue方法
public void addViewInQueue(View view){ LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); lp.setMargins(viewMargin, 0, 0, 0); view.setLayoutParams(lp); mainLayout.addView(view); view.measure(0, 0);//測量view viewWidth = viewWidth + view.getMeasuredWidth() + viewMargin; } 這個方法里首先沒有限制每個圖片寬高，所以造成拉伸不一致;然后view.mesure(0,0)的做法不太好，因為作者是在調(diào)用的時候用了ImageView的setBackgroundResource，最后獲取的getMesuredWidth()值不是我想要的
我希望的拉伸處理辦法是高度要拉伸到和屏幕高度一致，圖片寬度也要按照這個比例拉伸，所以肯定要改這個lp參數(shù)，不能是wrap.下面是我的改動：
public?void?addImageInQueue(int?drawable){
????//在不加載圖片的前提下獲得圖片的寬高,否則很容易OOM
????BitmapFactory.Options?options?=?new?BitmapFactory.Options();/**?????*?最關(guān)鍵在此，把options.inJustDecodeBounds?=?true;?????*?這里再decodeFile()，返回的bitmap為空，但此時調(diào)用options.outHeight時，已經(jīng)包含了圖片的高了?????*?decodeResource道理也是一樣的?????*/????options.inJustDecodeBounds?=?true;
????Bitmap?bitmap?=?BitmapFactory.decodeResource(getResources(),?drawable,options);//?此時返回的bitmap為null/**?????*options.outHeight為原始圖片的高?????*/????int?height?=?options.outHeight;
????int?width?=?options.outWidth;
????int?imageWidth?=?width*screenHeight/height;//將圖片的高度拉伸到和屏幕高度一樣，然后獲取等比拉伸后圖片應(yīng)該的寬度
????LinearLayout.LayoutParams?lp?=?new?LinearLayout.LayoutParams(imageWidth,
????????????screenHeight);
????ImageView?view?=?new?ImageView(getContext());
????view.setLayoutParams(lp);
????/*view.setImageResource(drawable);*/
????Glide.with(getContext()).load(drawable).placeholder(R.color.white).into(view);
????view.setScaleType(ImageView.ScaleType.FIT_XY);//設(shè)置圖片填充滿控件
????mainLayout.addView(view);
????viewWidth?=?viewWidth?+?imageWidth;
}BitmapFactory.Options 非常好用，因為如果直接通過Bitmap獲取圖片的寬高，很容易OOM，用option的話實際上bitmap還為null，沒有非內(nèi)存造成壓力，特別是圖多的時候
（2）.MarqueeView里startScroll()和重寫的run()方法
要改這兩個方法，是因為我要實現(xiàn)2個效果：
從左往右滑，拼起來的圖應(yīng)該先顯示最右邊的那部分，然后往右劃，一直滑到最左邊的圖，所以起始的currentX應(yīng)該是圖片總長度減去屏幕寬度，
從右往左滑，一開始就直接顯示最左邊圖的就行了全額，所以起始的currentX應(yīng)該是0
需要說明的是，這里
mainLayout.scrollTo(currentX,?0);
這個方法，currentX如果為正：圖片起始左下角x軸是0，滾動到正數(shù)，圖片左邊有部分不顯示
current為負，正好相反，圖片右邊有部分不顯示
從左往右的時候，起始currentX是正數(shù)，然后遞減1個像素，，看起來圖片就是從左往右移了
負數(shù)原理相反
我覺得這個才是這個自定義View的精髓，感謝原作者的分析
(3)scroll_content的布局是有問題的，里面沒有設(shè)置orientation
android:orientation="horizontal"
貼下我改了之后的代碼,里面設(shè)置了初始值，可以去掉，我這是自己要用
//開始滾動
public?void?startScroll(){
????removeCallbacks(this);
????//必須要保證所有圖片拉伸后總寬度大于屏幕寬度
????if(viewWidth?>?screenWidth){
????????viewWidth?=?viewWidth?-?screenWidth;
????????currentX?=?(scrollDirection?==?LEFT_TO_RIGHT???viewWidth?:?0);
????????if(isSetFirtsX)?currentX?=?firtsX;//如果設(shè)置了起始值，就使用起始值
????????post(this);
????}
}@Override
public?void?run()?{
????switch?(scrollDirection){
????????case?LEFT_TO_RIGHT:
????????????mainLayout.scrollTo(currentX,?0);
????????????currentX?--;
????????????if?(currentX?==?0)?{
????????????????mainLayout.scrollTo(viewWidth,?0);
????????????????currentX?=?viewWidth;
????????????}
????????????break;
????????case?RIGHT_TO_LEFT:
????????????mainLayout.scrollTo(currentX,?0);
????????????currentX?++;
????????????if?(currentX?==?viewWidth)?{
????????????????mainLayout.scrollTo(0,?0);
????????????????currentX?=?0;
????????????}
????????????break;
????????default:
????????????break;
????}然后我貼下完整的代碼
public?class?MarqueeView?extends?HorizontalScrollView?implements?Runnable?{
????private?Context?context;
????private?LinearLayout?mainLayout;//跑馬燈滾動部分
????private?int?scrollSpeed?=?5;//滾動速度
????private?int?scrollDirection?=?LEFT_TO_RIGHT;//滾動方向
????private?int?currentX;//當前x坐標
????private?int?viewMargin?=?20;//View間距
????private?int?viewWidth;//View總寬度
????private?int?screenWidth;//屏幕寬度
????private?int?screenHeight;//屏幕高度
????public?static?final?int?LEFT_TO_RIGHT?=?1;
????public?static?final?int?RIGHT_TO_LEFT?=?2;
????private?boolean?isSetFirtsX?=?false;//true的時候使用起始值
????public?boolean?isSetFirtsX()?{
????????return?isSetFirtsX;
????}
????public?MarqueeView?setSetFirtsX(boolean?setFirtsX)?{
????????isSetFirtsX?=?setFirtsX;
????????return?this;
????}
????private?int?firtsX;//起始值，可以設(shè)置負數(shù)和0,根據(jù)isSetFirtsX是否為true判斷是否使用
????public?int?getFirtsX()?{
????????return?firtsX;
????}
????public?void?setFirtsX(int?firtsX)?{
????????this.firtsX?=?firtsX;
????}
????public?int?getCurrentX()?{
????????return?currentX;
????}
????public?void?setCurrentX(int?currentX)?{
????????this.currentX?=?currentX;
????}
????public?MarqueeView(Context?context)?{
????????this(context,?null);
????}
????public?MarqueeView(Context?context,?AttributeSet?attrs)?{
????????this(context,?attrs,?0);
????}
????public?MarqueeView(Context?context,?AttributeSet?attrs,?int?defStyle)?{
????????super(context,?attrs,?defStyle);
????????this.context?=?context;
????????initView();
????}
????void?initView()?{
????????WindowManager?wm?=?(WindowManager)?getContext().getSystemService(Context.WINDOW_SERVICE);
????????screenWidth?=?wm.getDefaultDisplay().getWidth();
????????screenHeight?=?wm.getDefaultDisplay().getHeight();
????????mainLayout?=?(LinearLayout)?LayoutInflater.from(context).inflate(R.layout.scroll_content,?null);
????????this.addView(mainLayout);
????}
????public?void?addImagesInQueue(Listdrawables){
????????for?(int?drawable?:?drawables){
????????????addImageInQueue(drawable);
????????}
????}
????public?void?addImageInQueue(int?drawable){
????????//在不加載圖片的前提下獲得圖片的寬高,否則很容易OOM
????????BitmapFactory.Options?options?=?new?BitmapFactory.Options();/**?????????*?最關(guān)鍵在此，把options.inJustDecodeBounds?=?true;?????????*?這里再decodeFile()，返回的bitmap為空，但此時調(diào)用options.outHeight時，已經(jīng)包含了圖片的高了?????????*?decodeResource道理也是一樣的?????????*/????????options.inJustDecodeBounds?=?true;
????????Bitmap?bitmap?=?BitmapFactory.decodeResource(getResources(),?drawable,options);//?此時返回的bitmap為null/**?????????*options.outHeight為原始圖片的高?????????*/????????int?height?=?options.outHeight;
????????int?width?=?options.outWidth;
????????int?imageWidth?=?width*screenHeight/height;//將圖片的高度拉伸到和屏幕高度一樣，然后獲取等比拉伸后圖片應(yīng)該的寬度
????????LinearLayout.LayoutParams?lp?=?new?LinearLayout.LayoutParams(imageWidth,
????????????????screenHeight);
????????ImageView?view?=?new?ImageView(getContext());
????????view.setLayoutParams(lp);
????????/*view.setImageResource(drawable);*/
????????Glide.with(getContext()).load(drawable).placeholder(R.color.white).into(view);
????????view.setScaleType(ImageView.ScaleType.FIT_XY);//設(shè)置圖片填充滿控件
????????mainLayout.addView(view);
????????viewWidth?=?viewWidth?+?imageWidth;
????}
????//開始滾動
????public?void?startScroll(){
????????removeCallbacks(this);
????????//必須要保證所有圖片拉伸后總寬度大于屏幕寬度
????????if(viewWidth?>?screenWidth){
????????????viewWidth?=?viewWidth?-?screenWidth;
????????????currentX?=?(scrollDirection?==?LEFT_TO_RIGHT???viewWidth?:?0);
????????????if(isSetFirtsX)?currentX?=?firtsX;//如果設(shè)置了起始值，就使用起始值
????????????post(this);
????????}
????}
????//停止?jié)L動
????public?void?stopScroll(){
????????removeCallbacks(this);
????}
????//設(shè)置View間距
????public?void?setViewMargin(int?viewMargin){
????????this.viewMargin?=?viewMargin;
????}
????//設(shè)置滾動速度
????public?void?setScrollSpeed(int?scrollSpeed){
????????this.scrollSpeed?=?scrollSpeed;
????}
????//設(shè)置滾動方向?默認從左向右
????public?void?setScrollDirection(int?scrollDirection){
????????this.scrollDirection?=?scrollDirection;
????}
????@Override
????public?void?run()?{
????????switch?(scrollDirection){
????????????case?LEFT_TO_RIGHT:
????????????????mainLayout.scrollTo(currentX,?0);
????????????????currentX?--;
????????????????if?(currentX?==?0)?{
????????????????????mainLayout.scrollTo(viewWidth,?0);
????????????????????currentX?=?viewWidth;
????????????????}
????????????????break;
????????????case?RIGHT_TO_LEFT:
????????????????mainLayout.scrollTo(currentX,?0);
????????????????currentX?++;
????????????????if?(currentX?==?viewWidth)?{
????????????????????mainLayout.scrollTo(0,?0);
????????????????????currentX?=?0;
????????????????}
????????????????break;
????????????default:
????????????????break;
????????}
????????postDelayed(this,?50?/?scrollSpeed);
????}
????@Override
????public?boolean?onTouchEvent(MotionEvent?ev)?{
????????return?false;
????}
}調(diào)用代碼也很簡單
private?void?initMarqueeView(){
????Listlist?=?new?ArrayList<>();
????list.add(R.drawable.bg_first_01);
????list.add(R.drawable.bg_first_02);
????list.add(R.drawable.bg_first_03);
????list.add(R.drawable.bg_first_04);
????list.add(R.drawable.bg_first_05);
????list.add(R.drawable.bg_first_06);
????marquee_view.addImagesInQueue(list);
????marquee_view.setScrollSpeed(8);
????marquee_view.setScrollDirection(MarqueeView.RIGHT_TO_LEFT);
????marquee_view.startScroll();
}scroll_content布局的代碼
到此結(jié)束，希望對大家有幫助，GIF真的不會搞，見諒
下載文檔
