0x001 基本控件学习

0x000 学习环境搭建


  • 系统: Win10
  • IDE:Android Studio 2.0
  • 虚拟机:自带
  • 项目管理工具:github
  • github地址:https://github.com/AndroidTour/AndroidStudy
  • 项目架构(持续更新):LaucherActivity+Activity
  • 项目目录结构(持续更新):

0x001 基本控件学习_第1张图片
Paste_Image.png

注意:每个学习章节放一个包,用LauncherActivity管理,每个章节的学习控件放一个包,用LauncherActivity管理,每个控件放一个包。

0x001 概述


java是单根继承的语言,所有的类都继承于Object。而安卓使用的就是java语言,所以,安卓SDK中的类也是继承于Object,这一点我们从google官方提供的Android doc就可以看出,打开文档、随便打开一个API,就可以看到如下一个继承数:

0x001 基本控件学习_第2张图片
类继承示例.png

我们应该理解一下安卓中View到底是怎么一回事。

先看看TextView的继承树:

0x001 基本控件学习_第3张图片
TextView.png

可以看出,TextView继承自View,而View又是Object的子类。
那Viwe是什么呢,看看官方文档API Guide中User Interface一节对视图怎么解释的吧!

All user interface elements in an Android app are built using View and ViewGroup objects. A View is an object that draws something on the screen that the user can interact with. A ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the interface.

安卓程序中的所有UI元素都是使用View和ViewGroup元素构建的,View其实就是一个View对象绘制在屏幕上,它可以和用户进行交互。ViewGroup就是可以拥有很多和View或者ViewGroup对象的对象,他可以定义布局和接口。

也就是说View是控件,比如TextView,而ViewGroup是可以包含许多控件的布局控件,比如LinearLayou。我们可以看看View和ViewGroup的类继承树。看看其中的subclasses,可见,我们常用的Button、TextView、ImageView这些控件都继承自View,而我们使用的布局GrideLayou、LinearLayou等都继承自ViewGroup

0x001 基本控件学习_第4张图片
ViewGroup的类继承树.png
0x001 基本控件学习_第5张图片
View的类继承树.png

0x002 UI绘制


UI组件是如何呈现在屏幕上的

其实可以吧屏幕当做一个画布,每个组建都是通过画笔绘制在这个画布上的,当用户和屏幕有交互动作时候,就会触发画布的重新绘制,产生新的画面,就像电影一样,一帧一帧的变化。

自己绘制一个组件

  • 代码:

    //../baseui.customerview.MyButton
    public class MyButton extends View {
    public MyButton(Context context) {
      super(context);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
      super.onDraw(canvas);
    
      Paint paint=new Paint();
      paint.setColor(Color.RED);
      canvas.drawRect(10,10,500,500,paint);
      paint.setColor(Color.BLACK);
      paint.setTextSize(50);
      canvas.drawText("myButton",100,100,paint);
    }
    }
    
      //../baseui.customerview.CustomerButoon
    
    public class CustomerView extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(new MyButton(this));
    
    }
    }
    
  • 结果:

0x001 基本控件学习_第6张图片
Paste_Image.png

-分析:
canvas 是绘图工具,代码中,我们绘制了一个背景为红色且文字为“myButton”的图片,这时候,如果我们为他添加一个点击事件,还有和Button相同的点击效果,那么它就变成了Button,如果我们为她添加一张图片,那么它就是ImageView,所以,说到底,控件其实就是有不同样式和功能的图片,当然他们还有不同的交互方式,这些都通过canvas绘制并刷新显示在屏幕上。

0x003 TextView


继承树:

0x001 基本控件学习_第7张图片
TextView.png

基本使用:

//layout/textview_activity.xml
 




结果:

0x001 基本控件学习_第8张图片
Paste_Image.png

链接和电话

  • 代码:

      
    
  • 效果:

0x001 基本控件学习_第9张图片
Paste_Image.png

点击电话可跳转到拨号,点击邮箱可跳转到邮箱

在文字中间添加图片(新浪加v效果):

  • 代码
    //layout/activity_text_view
    android:id="@+id/tv_test2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

         //TextViewActivity
          Html.ImageGetter imageGetter=new Html.ImageGetter() {
              @Override
              public Drawable getDrawable(String source) {
                  BitmapDrawable bitmapDrawable= (BitmapDrawable) getResources().getDrawable(R.drawable.i);
                  bitmapDrawable.setBounds(0,0,bitmapDrawable.getIntrinsicWidth(),bitmapDrawable.getIntrinsicHeight());
                  return bitmapDrawable;
              }
      };
    
      tvTest2= (TextView) findViewById(R.id.tv_test2);
      tvTest2.setText(Html.fromHtml("你好吗",imageGetter,null));
    
  • 效果:

0x001 基本控件学习_第10张图片
Paste_Image.png

持续更新中

你可能感兴趣的:(0x001 基本控件学习)