项目实战:硅谷金融APPday05 随机飞入飞出&流式布局自定义View的使用
不否认努力,继续加油!
学习整理重点、盲区,笔记如下:干干巴巴,麻麻赖赖,一点都不圆润……
day05
内容
1. 随机飞入飞出效果的实现
-
效果图如下:当上滑或者下滑时,文本飞入废除,类似软件 soul 主页:
-
完整项目 源码已打包,下载地址:RandomLayoutDemo.
-
使用继承的 randomLayout;初始化需要显示的数据:
private String[] datas = new String[]{……}
-
设置回调方法
@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); }
-
实现 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. 测量模式: > 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()--->设置流式布局的宽高。
-
实现;已有 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; }
-
动态的添加数据;实际上数据往往来源于网络,需要动态加载;
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); }
-
GradientDrawable 的使用
setColor(rgb); //填充颜色 setGradientType(GradientDrawable.RECTANGLE); //shape矩形 setCornerRadius(radius); //四周圆角半径 setStroke(1,strokenColor); //边框厚度与颜色
盲区
- 声明:本博客根据尚硅谷项目实战: 硅谷金融.学习整理;
- 对于流式布局看得懂,但是写不了;
- 对于其他一些简单的基础竟然感觉都熟悉,但都不是得心应手,还是不够熟练,要加油啊!
- 没有实现登陆页面;因为不知道AS怎么连接MySQL;所以其实遇到了麻烦,不知道这个知识点……当然可以选择回避,不过还是试试吧。
其他笔记
金融App
- 金融APP01—页面架构.
- 金融APP02—主页及工具类创建
- 金融APP03—自定义 MyScrollView & 联网加载数据的4种状态的抽取及代码优化
- 金融APP04—投资理财页面实现
- 金融APP05—随机飞入飞出&流式布局自定义View的使用
商城
Android项目实战—— 商城APP.
新闻
Android项目实战—— 新闻APP.