分享一下我老师大神的人工智能教程!零基础,通俗易懂!/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
转载请标明出处: /lmj623565791/article/details/44098729,本文出自: 【张鸿洋的博客】
1、概述
本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的:
大概是今天头条的app,神奇的地方就在于,切换ViewPager页面的时候,顶部指示器改成了字体颜色的变化,个人觉得还是不错的。
那么核心的地方就是做一个支持字体这样逐渐染色就可以了,我大概想了32s,扫描了一些可能实现的方案,最终定位了一个靠谱的,下面我就带大家开始实现的征程。
实现之前贴一下我们的效果图:
2、效果图
1、简单使用
效果如上图了,关于颜失色的改变我添加了两个方向,一个是左方向,一个是有方向。
单纯的使用,可能觉得没什么意思,下面看结合ViewPager使用的一个例子。
2、结合ViewPager使用
可以看到我们切换页面的时候,上面的指示器的效果,棒棒哒~~~
当然了,学会了原理,你可以扩展,可以做个性的进度条,可以将字体变色改为背景色变色,可以把方向改为上下,太多了,自己去抠脚想把。
3、原理
看完效果图,有木有什么思路~~~花几分钟想想,因为原理很简单~~
我大致想了下,目测绘制半个字估计不行,那么就在绘制范围上下功夫,你可以全部绘制,但是我控制显示的范围,所以上述效果:
其实是绘制了两遍字体,但是呢,分别控制了绘制的显示范围,实现了逐渐变色的效果,那么对于范围的控制,有什么方便的API么,显然是有的
canvas有个clipRect的方法~~~ok,原理分析完毕~~
4、实现
说到实现,那第一步肯定又是自定义属性,我们这里的属性,需要text,textSize,textOriginColor,textChangeColor,progress,大致看一下,应该都能看出来作用吧,看不出来没事,结合下面的代码。tip:我们的View叫做ColorTrackView,感谢小七的命名。
1、自定义属性和获取
attr.xml
<?xml version="1.0" encoding="utf-8"?><resources> <attr name="text" format="string" /> <attr name="text_size" format="dimension" /> <attr name="text_origin_color" format="color|reference" /> <attr name="text_change_color" format="color|reference" /> <attr name="progress" format="float" /> <attr name="direction"> <enum name="left" value="0" /> <enum name="right" value="1" /> </attr> <declare-styleable name="ColorTrackView"> <attr name="text" /> <attr name="text_size" /> <attr name="text_origin_color" /> <attr name="text_change_color" /> <attr name="progress" /> <attr name="direction" /> </declare-styleable></resources>
然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性:
/*** * @author zhy**/public class ColorTrackView extends View{private int mTextStartX;public enum Direction{LEFT , RIGHT ;}private int mDirection = DIRECTION_LEFT; private static final int DIRECTION_LEFT = 0 ; private static final int DIRECTION_RIGHT= 1 ;public void setDirection(int direction){mDirection = direction;}private String mText = "张鸿洋";private Paint mPaint;private int mTextSize = sp2px(30);private int mTextOriginColor = 0xff000000;private int mTextChangeColor = 0xffff0000;private Rect mTextBound = new Rect();private int mTextWidth;private int mRealWidth;private float mProgress;public ColorTrackView(Context context){super(context, null);}public ColorTrackView(Context context, AttributeSet attrs){super(context, attrs);mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.ColorTrackView);mText = ta.getString(R.styleable.ColorTrackView_text);mTextSize = ta.getDimensionPixelSize(R.styleable.ColorTrackView_text_size, mTextSize);mTextOriginColor = ta.getColor(R.styleable.ColorTrackView_text_origin_color,mTextOriginColor);mTextChangeColor = ta.getColor(R.styleable.ColorTrackView_text_change_color,mTextChangeColor);mProgress = ta.getFloat(R.styleable.ColorTrackView_progress, 0);mDirection = ta.getInt(R.styleable.ColorTrackView_direction, mDirection);ta.recycle();mPaint.setTextSize(mTextSize);measureText();}
private void measureText(){mTextWidth = (int) mPaint.measureText(mText);mPaint.getTextBounds(mText, 0, mText.length(), mTextBound);}
可以看到我同时贴出了成员变量,大家简单看下就行了,都比较简单。
获取了属性,初始化完成一些成员变量以后,那么应该走向我们的measure之旅了~~
2、onMeasure
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){int width = measureWidth(widthMeasureSpec);int height = measureHeight(heightMeasureSpec);setMeasuredDimension(width, height);mRealWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();mTextStartX = mRealWidth / 2 - mTextWidth / 2;}private int measureHeight(int measureSpec){int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode){case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:result = mTextBound.height();break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingTop() + getPaddingBottom();}private int measureWidth(int measureSpec){int mode = MeasureSpec.getMode(measureSpec);int val = MeasureSpec.getSize(measureSpec);int result = 0;switch (mode){case MeasureSpec.EXACTLY:result = val;break;case MeasureSpec.AT_MOST:case MeasureSpec.UNSPECIFIED:// result = mTextBound.width();result = mTextWidth;break;}result = mode == MeasureSpec.AT_MOST ? Math.min(result, val) : result;return result + getPaddingLeft() + getPaddingRight();}
关于测量,也是比较传统的写法,根据传入的widthMeasureSpec、heightMeasureSpec,利用MeasureSpec分别获取模式和值,如何是EXACTLY万事大吉,如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间,当然了,最好注意如果是AT_MOST不应该大于父类传入的值。
这里提一下,如果偷懒的话,可以选择继承TextView,然后测量就不需要写了,TextView默认帮你实现了,还能利用TextView的一些属性,不过咱们这个例子比较简单,我最终还是选择了继承View,继承View有种everything under control 的感觉。
测量完成以后,不用说都是绘制了。
3、onDraw
@Overrideprotected void onDraw(Canvas canvas){super.onDraw(canvas);int r = (int) (mProgress* mTextWidth +mTextStartX );if(mDirection == DIRECTION_LEFT){drawChangeLeft(canvas, r);drawOriginLeft(canvas, r);}else{ drawOriginRight(canvas, r); drawChangeRight(canvas, r);}}private void drawChangeRight(Canvas canvas, int r){drawText(canvas, mTextChangeColor, (int) (mTextStartX +(1-mProgress)*mTextWidth), mTextStartX+mTextWidth );}private void drawOriginRight(Canvas canvas, int r){drawText(canvas, mTextOriginColor, mTextStartX, (int) (mTextStartX +(1-mProgress)*mTextWidth) );}private void drawChangeLeft(Canvas canvas, int r){drawText(canvas, mTextChangeColor, mTextStartX, (int) (mTextStartX + mProgress * mTextWidth) );}private void drawOriginLeft(Canvas canvas, int r){drawText(canvas, mTextOriginColor, (int) (mTextStartX + mProgress * mTextWidth), mTextStartX +mTextWidth );}private void drawText(Canvas canvas , int color , int startX , int endX){mPaint.setColor(color);canvas.save(Canvas.CLIP_SAVE_FLAG);canvas.clipRect(startX, 0, endX, getMeasuredHeight());canvas.drawText(mText, mTextStartX, getMeasuredHeight() / 2+ mTextBound.height() / 2, mPaint);canvas.restore();}
绘制的核心就在于利用mProgress和方向去计算应该clip的范围,具体的参考代码,没什么难点。有了范围以后,无非就是drawText~~~
该View的完整代码:ColorTrackView
主要的方法介绍完毕,我们就该测试了。
5、测试
1、简单测试
布局文件
<RelativeLayout xmlns:android="/apk/res/android" xmlns:tools="/tools" xmlns:zhy="/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" > <com.zhy.view.ColorTrackView android:id="@+id/id_changeTextColorView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:background="#44ff0000" android:padding="10dp" zhy:progress="0" zhy:text="张鸿洋" zhy:text_change_color="#ffff0000" zhy:text_origin_color="#ff000000" zhy:text_size="60sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:orientation="horizontal" > <Button android:id="@+id/id_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:onClick="startLeftChange" android:text="StartLeft" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/id_left" android:onClick="startRightChange" android:text="StartRight" /> </LinearLayout></RelativeLayout>
注意我们的自定义属性的命名空间,该布局就一个ColorTrackView,然后两个按钮来控制进度。
SimpleUseActivity:
package com.zhy.viewpagerIndicator;import android.animation.ObjectAnimator;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.view.View;import com.zhy.view.ColorTrackView;public class SimpleUseActivity extends Activity{ColorTrackView mView;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_simple_main);mView = (ColorTrackView) findViewById(R.id.id_changeTextColorView);}@SuppressLint("NewApi")public void startLeftChange(View view){mView.setDirection(0);ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000).start();}@SuppressLint("NewApi")public void startRightChange(View view){mView.setDirection(1);ObjectAnimator.ofFloat(mView, "progress", 0, 1).setDuration(2000).start();}}
这里拿属性动画进行的测试,没有导入3.0以下兼容包,有需要自己导入。
效果图,见上效果图1。
2、结合ViewPager
布局文件:
<LinearLayout xmlns:android="/apk/res/android" xmlns:zhy="/apk/res-auto" xmlns:tools="/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal" > <com.zhy.view.ColorTrackView android:id="@+id/id_tab_01" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" zhy:progress="1" zhy:text="简介" zhy:text_change_color="#ffff0000" zhy:text_origin_color="#ff000000" zhy:text_size="18sp" /> <com.zhy.view.ColorTrackView android:id="@+id/id_tab_02" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" zhy:text="评价" zhy:text_change_color="#ffff0000" zhy:text_origin_color="#ff000000" zhy:text_size="18sp" /> <com.zhy.view.ColorTrackView android:id="@+id/id_tab_03" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" zhy:text="相关" zhy:text_change_color="#ffff0000" zhy:text_origin_color="#ff000000" zhy:text_size="18sp" /> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager></LinearLayout>
3个ColorTrackView代表Tab,下面是ViewPager
ViewPagerUseActivity:
package com.zhy.viewpagerIndicator;import java.util.ArrayList;import java.util.List;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.util.Log;import com.zhy.view.ColorTrackView;public class ViewPagerUseActivity extends FragmentActivity{private String[] mTitles = new String[] { "简介", "评价", "相关" };private ViewPager mViewPager;private FragmentPagerAdapter mAdapter;private TabFragment[] mFragments = new TabFragment[mTitles.length];private List<ColorTrackView> mTabs = new ArrayList<ColorTrackView>();@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_vp_main);initViews();initDatas();initEvents();}private void initEvents(){mViewPager.setOnPageChangeListener(new OnPageChangeListener(){@Overridepublic void onPageSelected(int position){}@Overridepublic void onPageScrolled(int position, float positionOffset,int positionOffsetPixels){if (positionOffset > 0) { ColorTrackView left = mTabs.get(position); ColorTrackView right = mTabs.get(position + 1); left.setDirection(1);right.setDirection(0);Log.e("TAG", positionOffset+""); left.setProgress( 1-positionOffset); right.setProgress(positionOffset); } }@Overridepublic void onPageScrollStateChanged(int state){}});}private void initDatas(){for (int i = 0; i < mTitles.length; i++){mFragments[i] = (TabFragment) TabFragment.newInstance(mTitles[i]);}mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){@Overridepublic int getCount(){return mTitles.length;}@Overridepublic Fragment getItem(int position){return mFragments[position];}};mViewPager.setAdapter(mAdapter);mViewPager.setCurrentItem(0);}private void initViews(){mViewPager = (ViewPager) findViewById(R.id.id_viewpager);mTabs.add((ColorTrackView) findViewById(R.id.id_tab_01));mTabs.add((ColorTrackView) findViewById(R.id.id_tab_02));mTabs.add((ColorTrackView) findViewById(R.id.id_tab_03));}}
TabFragment
package com.zhy.viewpagerIndicator;import java.util.Random;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class TabFragment extends Fragment{public static final String TITLE = "title";private String mTitle = "Defaut Value";@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);if (getArguments() != null){mTitle = getArguments().getString(TITLE);}}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState){TextView tv = new TextView(getActivity());tv.setTextSize(60);Random r = new Random();tv.setBackgroundColor(Color.argb(r.nextInt(120), r.nextInt(255),r.nextInt(255), r.nextInt(255)));tv.setText(mTitle);tv.setGravity(Gravity.CENTER);return tv;}public static TabFragment newInstance(String title){TabFragment tabFragment = new TabFragment();Bundle bundle = new Bundle();bundle.putString(TITLE, title);tabFragment.setArguments(bundle);return tabFragment;}}
效果图见上效果图2。
源码地址:ColorTrackView,欢迎star or fork。
群号:429757068
微信公众号请扫描(第一时间通知博客、视频等通知):
给我老师的人工智能教程打call!/jiangjunshow
你好! 这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
全新的界面设计,将会带来全新的写作体验;在创作中心设置你喜爱的代码高亮样式,Markdown将代码片显示选择的高亮样式进行展示;增加了图片拖拽功能,你可以将本地的图片直接拖拽到编辑区域直接展示;全新的KaTeX数学公式语法;增加了支持甘特图的mermaid语法1功能;增加了多屏幕编辑Markdown文章功能;增加了焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置等功能,功能按钮位于编辑区域与预览区域中间;增加了检查列表功能。
功能快捷键
撤销:Ctrl/Command+Z
重做:Ctrl/Command+Y
加粗:Ctrl/Command+B
斜体:Ctrl/Command+I
标题:Ctrl/Command+Shift+H
无序列表:Ctrl/Command+Shift+U
有序列表:Ctrl/Command+Shift+O
检查列表:Ctrl/Command+Shift+C
插入代码:Ctrl/Command+Shift+K
插入链接:Ctrl/Command+Shift+L
插入图片:Ctrl/Command+Shift+G
合理的创建标题,有助于目录的生成
直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC
语法后生成一个完美的目录。
如何改变文本的样式
强调文本强调文本
加粗文本加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的代码片
.
// An highlighted block var foo = 'bar';
生成一个适合你的列表
项目 项目 项目 项目1项目2项目3计划任务完成任务创建一个表格
一个简单的表格是这么创建的:
设定内容居中、居左、居右
使用:---------:
居中
使用:----------
居左
使用----------:
居右
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:
创建一个自定义列表
Markdown Text-to- HTMLconversion tool Authors John Luke如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息LaTeX数学表达式here.
新的甘特图功能,丰富你的文章
ganttdateFormat YYYY-MM-DDtitle Adding GANTT diagram functionality to mermaidsection 现有任务已完成:done, des1, -01-06,-01-08进行中:active, des2, -01-09, 3d计划一: des3, after des2, 5d计划二: des4, after des3, 5d
关于甘特图语法,参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图::
这将产生一个流程图。:
关于Mermaid语法,参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图:
关于Flowchart流程图语法,参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到文章导出,生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件或者.html文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,
继续你的创作。
mermaid语法说明 ↩︎
注脚的解释 ↩︎