随机飞入飞出&流式布局自定义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.