Android動態UI適配（等比縮放）

仙道彰發表於2018-01-24
原文網址 : https://juejin.im/post/5a675f2cf265da3e4f0a51ef
AndroidUI

Image of Yaktocat

在Android日常開發中，我們經常會遇到各種不同螢幕尺寸的手機，適配是一件很讓人頭疼的事情，特別是剛接觸Android開發的童鞋，Axis 是我在開發中常用的方案，一套圖（1920*1080）來適配所有的機型。主要是運用了等比縮放的方案，但是在實際開發中，只做X軸的等比，Y軸超出部分用滾動條。 這樣就能避免，XY軸同時縮放帶來的變形問題。

Axis是什麼?

一個用Java程式碼動態佈局的適配方案。

Axis怎麼用？

其實很簡單，先來了解一下，一個View在螢幕中的位置以及形狀取決於（x,y,w,h）,既左上角座標和View的實際寬高。接下來直接看下程式碼中的使用。

  • 獲取螢幕 w,h以及scaledDensity。

          DisplayMetrics metrics = new DisplayMetrics();
      WindowManager mWindowManager  = (WindowManager) AxisConfig.mContext .getSystemService(Context.WINDOW_SERVICE);
      mWindowManager.getDefaultDisplay().getMetrics(metrics);
      w = metrics.widthPixels;
      h = metrics.heightPixels;
      scaledDensity = metrics.scaledDensity;
複製程式碼

  • 再來看一下核心部分，X軸與Y軸的等比縮放方法 //Config.width Config.height就是我們UI妹子設計的UI圖寬高啦，目前一般都是（1920*1080）

          public static int scaleX(int x, float ox) {
      		return (int) (x * (w - w * ox) / (Config.width - Config.width * ox));
      	}
      
      public static int scaleY(int y, float oy) {
      		return (int) (y * (h - h * oy) / (Config.height - Config.height * oy));
      	}
複製程式碼

  • 用Android 自帶API 動態新增View //這樣就新增了一個View

          RelativeLayout middleLayout = new RelativeLayout(getActivity());
  	middleLayout.setBackgroundColor(0xFF20B2AA);
  	RelativeLayout.LayoutParams middleLayout_Params = new RelativeLayout.LayoutParams(Axis.scaleX(800), Axis.scaleX(800));
  	middleLayout_Params.addRule(RelativeLayout.CENTER_IN_PARENT);
  	view.addView(middleLayout,middleLayout_Params);

  	middleLayout = new RelativeLayout(getActivity());
  	middleLayout.setBackgroundColor(0xFF1874CD);
  	middleLayout_Params = new RelativeLayout.LayoutParams(Axis.scaleX(400),Axis.scaleX(400));
  	middleLayout_Params.addRule(RelativeLayout.CENTER_HORIZONTAL);
  	middleLayout_Params.setMargins(0,Axis.scaleX(250),0,0);
  	view.addView(middleLayout,middleLayout_Params);              
複製程式碼

  • 以上是View的適配，因為用了等比縮放，就直接忽略了螢幕密度，下面說說字型的適配，這個就和螢幕密度有關了，看下面 public static float scaleTextSize(int textSize) { return scale(textSize) / scaledDensity; }

  • 再說一下，其實能用XML佈局的屬性，程式碼基本上都是有這個屬性的，所以用Java程式碼佈局，把介面拆分，做成元件，是一件非常簡單的事情，而且複用性相當高的。 比如說HeaderView BottomView 等等複雜的View都可以封裝起來。好了就說到這吧。直接看程式碼吧。 哈哈哈哈。。。。記得在你的 Application中初始化哦。 Axis.init(this,1080,1920);//適配初始化,基準寬高

  • Github：專案地址

相關文章