隨機飛入飛出&流式佈局自定義View的使用—Android項目實戰—金融APP05

不否認努力，繼續加油！
學習整理重點、盲區，筆記如下：乾乾巴巴，麻麻賴賴，一點都不圓潤……

day05

內容

1. 隨機飛入飛出效果的實現

1. 效果圖如下：當上滑或者下滑時，文本飛入廢除，類似軟件 soul 主頁：

2. 完整項目 源碼已打包，下載地址：RandomLayoutDemo.
   

3. 使用繼承的 randomLayout；初始化需要顯示的數據：

   private String[] datas = new String[]{……}
   

4. 設置回調方法

   @Override
   protected void initData(String content) {
       firstGroup = new String[datas.length / 2];
       secondGroup = new String[datas.length - datas.length / 2];
       for(int i = 0;i < datas.length;i++){
           if(i < datas.length / 2){
               firstGroup[i] = datas[i];
    		}else{
               secondGroup[i - datas.length/2] = datas[i];
    		}
    	}
      MyAdapter myAdapter = new MyAdapter();
       stellarmap.setAdapter(myAdapter);
       //設置內邊距
       stellarmap.setInnerPadding(leftPadding,topPadding,rightPadding,bottomPadding);
    	//爲了能顯示數據，如下的方法一定要調用   
    	// 設置默認顯示第幾組的數據；以及是否使用動畫
       stellarmap.setGroup(0, true);
       // 設置x和y方向上的顯示的密度
       stellarmap.setRegularity(2, 4);
   }
   

5. 實現 StellarMap.Adapter 類

   class MyAdapter implements StellarMap.Adapter{
       /**
   	 * 返回有幾組(就是幾頁)數據，
        */
       @Override
       public int getGroupCount() {
           return 2;
   	}
       /**
    	 * 返回每組有多少個數據
        */
       @Override
       public int getCount(int group) {
           if(group == 0){
               return datas.length / 2;
     		}else{
               return datas.length - datas.length / 2;
     		}
    	}
       /**
    	 * 返回需要隨機擺放的View
    	 * group: 表示當前是第幾組
        * position： 表示當前組中的位置
        */
       @Override
       public View getView(int group, int position, View convertView) {
           int red = random.nextInt(211);
     		TextView tv = new TextView(getActivity());
     		tv.setTextColor(Color.rgb(red,green,blue));
     		tv.setTextSize(UIUtils.dp2px(random.nextInt(10) + 5));
           if(group == 0){
         		tv.setText(firstGroup[position]);
     		}else {
         		tv.setText(secondGroup[position]);
     		}
           return tv;
    	}
   
       /**
   	 * 當執行完平移動畫後下一組加載哪一組的數據，但是在源碼中沒有任何地方用到該方法，所以此方法並沒有什麼用
        */
       @Override
       public int getNextGroupOnPan(int group, float degree) {
           return 0;
    	}
   
       /**
   	 * 當執行完縮放動畫後下一組加載哪一組的數據
        */
       @Override
       public int getNextGroupOnZoom(int group, boolean isZoomIn) {
           if(group == 0){
               return 1;
     		}else{
               return 0;
     		}
    	}
   }
   

2. 流式佈局的使用

1. 使用場景，如下圖所示：

2. 佈局分析；

   1. 測量模式：
   	> MeasureSpec.EXACTLY：精確模式, eg:100dp,match_parent.
   	> MeasureSpec.AT_MOST： 至多模式, view最多可以獲得的寬高值,它需要計算所有包含的子 view 的寬高，最後計算出來的寬高總和值,eg:wrap_content.
   	> UNSPECIFIED:未指定模式,想設置多寬多高,就給你多寬多高,
   		eg:scrollview的寬高測量，就是使用的此種模式
   2. 怎麼設置佈局的寬高？ onMeasure()
   	 1:如果佈局指定的寬是match_parent或者精確的寬度值，那麼直接就可以從父控件傳入的測量規格中直接獲取佈局寬度，高度同理.
   	 2:如果佈局指定的寬高不是EXACTLY,而是AT_MOST,那麼這時候，就需要計算每一個子view的寬高，來決定佈局的寬高了。
    	寬度:擺放的所有子view佔據寬度最多的一行,作爲佈局寬度。
    	高度:擺放的所有子view總共佔據幾行的高度總和。
    
   3. 子View的佈局方式： onLayout()
   	> 使用onLayout():設置ViewGroup內包含的所有子view的位置;
   	> 獲取到每一行的每一個子view,計算出它的left,top,right,bottom,調用layout方法設置其在流式佈局當中的位置。
    	寬度 = 子 view 佔據寬度最多的那行的寬度
    		 = 那一行每一個子view的寬度+leftMargin+rightMargin;
    	高度 = 所有行的高度
    		 = 每一行的高度+topMargin+bottomMargin;
    	setMeasureDimension()--->設置流式佈局的寬高。	 
   

3. 實現；已有 flowlayout 項目.寫不了的話也要讀懂啊；

   //調用如下方法，才允許獲取子視圖的測量寬高
   measureChild(child, widthMeasureSpec, heightMeasureSpec);
   //FlowLayout中有了如下的方法，在onMeasure()中可通過child就可以getLayoutParams()，返回MarginLayoutParams類對象，進而計算margin的值
   @Override
   public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
    MarginLayoutParams mp = new MarginLayoutParams(getContext(), attrs);
       return mp;
   }
   

4. 動態的添加數據；實際上數據往往來源於網絡，需要動態加載；

   for (int i = 0; i < datas.length; i++) {
       final TextView tv = new TextView(getContext());
       tv.setText(datas[i]);
       ViewGroup.MarginLayoutParams mp = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT
               , ViewGroup.LayoutParams.WRAP_CONTENT);
       mp.leftMargin = UIUtils.dp2px(5);
       tv.setLayoutParams(mp);
       int padding = UIUtils.dp2px(2);
       tv.setPadding(padding, padding, padding, padding);
       tv.setTextSize(UIUtils.dp2px(8));
       Random random = new Random();
       int red = random.nextInt(211);
       int green = random.nextInt(211);
       int blue = random.nextInt(211);
       //設置單一背景
       //tv.setBackground(DrawUtils.getDrawable(Color.rgb(red,green,blue),UIUtils.dp2px(5)));
       //設置具有選擇器功能的背景
       tv.setBackground(DrawUtils.getSelector(DrawUtils.getDrawable(Color.rgb(red, green, blue)
               , UIUtils.dp2px(5)), DrawUtils.getDrawable(Color.WHITE, UIUtils.dp2px(5))));
       //設置textView是可點擊的.如果設置了點擊事件，則TextView就是可點擊的。
       //tv.setClickable(true);
       tv.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               UIUtils.toast(tv.getText().toString(), false);
           }
       });
       flowHot.addView(tv);
   }
   

5. GradientDrawable 的使用

   setColor(rgb);  //填充顏色
   setGradientType(GradientDrawable.RECTANGLE); //shape矩形
   setCornerRadius(radius);  //四周圓角半徑
   setStroke(1,strokenColor); //邊框厚度與顏色
   

盲區

1. 聲明：本博客根據尚硅谷項目實戰: 硅谷金融.學習整理；
2. 對於流式佈局看得懂，但是寫不了；
3. 對於其他一些簡單的基礎竟然感覺都熟悉，但都不是得心應手，還是不夠熟練，要加油啊！
4. 沒有實現登陸頁面；因爲不知道AS怎麼連接MySQL；所以其實遇到了麻煩，不知道這個知識點……當然可以選擇迴避，不過還是試試吧。

其他筆記

金融App

1. 金融APP01—頁面架構.
2. 金融APP02—主頁及工具類創建
3. 金融APP03—自定義 MyScrollView & 聯網加載數據的4種狀態的抽取及代碼優化
4. 金融APP04—投資理財頁面實現
5. 金融APP05—隨機飛入飛出&流式佈局自定義View的使用

商城

Android項目實戰—— 商城APP.

新聞

Android項目實戰—— 新聞APP.