第一行代码笔记②

2.1 TextView

TextView用于指定一段文本。

    <TextView
   		android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity = "center"
        android:textSize="24sp"
        android:textColor="#00ff00"
        android:text="Hello World!"
        />

android:id指定唯一标识符
android:layout_width和android:layout_height是指定控件的宽度和高度。有三个参数，match_parent和fill_parent意义相同，表示让当前控件的大小和父布局的大小一样。也就是由父布局来决定当前控件的大小。wrap_content表示让当前控件的大小能够刚好包含住里面的内容，也就是由控件内容决定控件大小。
android:gravity用来指定文字的对齐方式，有top、bottom、left、right、center等等。
android:textSize指定文字的大小，单位为sp
android:textColor指定文字的颜色
android:text指定文字的内容

2.2 Button

Button的属性也类似，值得注意的是，我们在布局里面设置的文字是"Button"，最终显示却是"BUTTON"，系统会自动对Button中所有的英文字母自动进行大写转换。可以通过下列方式禁用这一默认特性。

<Button
android:textAllCaps="false"
/>

2.3 EditText

可以用过android:hint这一属性指定一段提示性的文本

<EditText
android:id="@+id/edit_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Type something here"
android:maxLines="2"
/>

但是当内容不断增多的时候，EditText会被不断拉长。因为我们设置的高是warp_content，因此它总能包含住里面的内容。当内容过多时，界面就很难看。我们可以通过android:maxLines属性去解决这个问题。

2.4 ImageView

ImageView是用于在界面上展示图片的一个控件。图片通常放在"drawable"开头的目录下面，通常会有一个空的drawable目录，但是这个目录没有指定具体的分辨率，所以一般不用它来放置图片。新建drawable-xhdpi目录。使用android:src属性去指定图片。由于图片宽高未知，因此我们都将其设定为wrap_content 这一不管图片的尺寸是多少，图片都能完整的显示出来。

2.5 ProgressBar

ProgressBar用于在界面上显示一个进度条，表示我们的程序正在加载一些数据。

    <ProgressBar
        android:id="@+id/progress_bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100" />

如果想让进度条消失，则涉及到android:visibility，包含三个参数，visible（默认值）、invisible和gone，前两个分别代表可见、不可见，gone不仅代表不可见，而且不再占用任何屏幕空间。
可以使用style标签让进度条由默认的圆形进度条变成水平进度条。通过android:max去指定进度条的最大值。

2.6 线性布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

通过android:orientation去指定控件是水平还是垂直排列。值得注意的是，当排列方式是水平的时候，只有垂直方向的对齐才有效，垂直排列的时候同理。

布局中控件的排列方式可以使用android:layout_gravity去指定，注意前面提到过android:gravity，后者是用于指定文字在控件中的对齐方式。

    <Button
        android:id="@+id/start_normal_activity"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <Button
        android:id="@+id/start_dialog_activity"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textAllCaps="false" />

将宽度设置为0dp，是一种比较规范的写法。dp是控件大小、间距等属性的单位。当使用android:layout_weight属性的时候，系统会将布局下的所有android:layout_weight的值相加，再按照比例划分各个控件所占据的空间。

2.7 相对布局

相对布局有两种方式，一种是相对父布局，一种是相对指定的控件。

RelativeLayout 
父布局
<Button
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"/>

相对指定控件
<Button
android:layout_above="@id/button1"
android:layout_toRightOf="@id/button1"/>

主要属性：**android:layout_alignParentLeft、android:layout_above、android:layout_toRightOf=**等，用到哪个再学哪个。

2.8 帧布局

所有控件都会默认摆放在布局的左上角。使用场景较少，在介绍碎片的时候再说。

2.9 百分比布局

直接使用百分比设置控件的高宽，这个也比较简单。

2.10 自定义引入布局

每个界面可能都有一个类似的标题栏，我们可以将他们抽取在一个文件中

首先新建一个布局文件title.xlm
然后只需要在activity_main.xml中引入这个布局就行

<include layout="@layout/title"/>

同时可以在MainActivity中将系统自带的标题栏隐藏掉

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null){
            actionBar.hide();
        }
//        Button button = findViewById(R.id.button);
//        button.setOnClickListener(this);
//        replaceFragment(new RightFragment());
    }

前面引入布局的技巧，可以解决重复编写布局代码的问题（xml文件）
与此同时，这些布局中可能会有一些公共的响应事件，比如返回按钮等。下面我们将这些事件也抽取出来。

新建TitleLayou继承自LinearLayout，重写LinearLayout中的构造器（这里我认为应该是调用父类构造器，再通过LayoutInflater的from方法构建一个LayoutInflater对象，再调用inflate()方法去加载布局）。

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);
    }
}

定义好自定义控件以后，下面我们需要在布局文件中添加这个自定义控件，同样也是在activity_main.xml中，类似于前面的include，我们需要指名控件的完整类名。

    <com.example.uicustomviews.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

最后在TitleLayout中的注册点击事件，这样每当我们在一个布局中引入TitleLayout的时候，返回按钮和编辑按钮的点击事件就已经自动实现好了。

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);
        Button titleBack = (Button) findViewById(R.id.title_back);
        Button titleEdit = (Button) findViewById(R.id.title_edit);
        titleBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("sout","this"+getContext().toString());
                Log.d("sout",getContext() instanceof Activity?"yes":"no");

                ((Activity)getContext()).finish();
            }
        });
        titleEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getContext(),"You clicked Edit button",
                Toast.LENGTH_SHORT).show();
            }
        });

    }
}

2.11 ListView

ListView允许用户通过手指上下滑动式将屏幕外的数据滚动到屏幕内，比如查看QQ聊天记录、翻阅微博等。

需要注意的是，ListView不能直接接受数据，需要利用适配器去完成。适配器可以采用ArrayAdapter。一个简单的例子如下，首先定义xml，接着修改活动中的代码

activity_main.xml中

<ListView
    android:id="@+id/list_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

MainActivity中

public class MainActivity extends AppCompatActivity {
    private String[] data = {"Apple", "Banana", "Orange",
            "Watermelon", "Pear", "Grape", "Pineapple", "Strawberry",
            "Cherry", "Mango", "Apple", "Banana", "Orange",
            "Watermelon", "Pear", "Grape", "Pineapple", "Strawberry",
            "Cherry", "Mango"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this,
                android.R.layout.simple_list_item_1, data);
        ListView listView = (ListView) findViewById(R.id.list_view);
        listView.setAdapter(adapter);
    }
}

注意适配器的参数，使用的是android.R.layout.simple_list_item_1，这是系统内置的布局文件。

定制ListView界面

首先准备一个实体类

public class Fruit {
    private String name;
    private int imageId;

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

接着为ListView的子项指定一个自定义布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp" />
</LinearLayout>

接着自定义一个适配器

public class FruitAdapter extends ArrayAdapter<Fruit> {

    private int resourceId;

    public FruitAdapter(@NonNull Context context, int textViewResourceId, @NonNull List<Fruit> objects) {
        super(context, textViewResourceId, objects);
        resourceId = textViewResourceId;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
        ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
        TextView fruitname = (TextView) view.findViewById(R.id.fruit_name);
        fruitImage.setImageResource(fruit.getImageId());
        fruitname.setText(fruit.getName());
        return view;
    }
}

自定义的适配器重写了父类的一组构造函数，另外又重写了getView()方法，该方法在每个子项被滚动到屏幕内的时候会被调用。在getView()方法中，首先得到当前项的fruit实例，再通过LayoutIflater来为这个子项加载我们传入的布局。最后调用View的方法，设置对应的图片和文字。

接着修改MainActivity中的代码

public class MainActivity extends AppCompatActivity {

    private String[] data = {"Apple", "Banana", "Orange",
            "Watermelon", "Pear", "Grape", "Pineapple", "Strawberry",
            "Cherry", "Mango", "Apple", "Banana", "Orange",
            "Watermelon", "Pear", "Grape", "Pineapple", "Strawberry",
            "Cherry", "Mango"};

    private List<Fruit> fruitList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        FruitAdapter adapter = new FruitAdapter(MainActivity.this,
                R.layout.fruit_item,fruitList);

        ListView listView = (ListView) findViewById(R.id.list_view);
        listView.setAdapter(adapter);
    }

    public void initFruits() {
        for (int i = 0; i < 2; i++) {
            Fruit apple = new Fruit("Apple", R.drawable.apple_pic);
            Log.d("R.drawable.apple_pic=", ""+R.drawable.apple_pic);
            fruitList.add(apple);
            Fruit banana = new Fruit("Banana",R.drawable.banana_pic);
            fruitList.add(banana);
            Fruit Orange = new Fruit("Orange", R.drawable.orange_pic);
            fruitList.add(Orange);
            Fruit Watermelon = new Fruit("Watermelon",R.drawable.watermelon_pic);
            fruitList.add(Watermelon);
            Fruit Pear = new Fruit("Pear", R.drawable.pear_pic);
            fruitList.add(Pear);
            Fruit Grape = new Fruit("Grape",R.drawable.grape_pic);
            fruitList.add(Grape);
            Fruit Pineapple = new Fruit("Pineapple", R.drawable.pineapple_pic);
            fruitList.add(Pineapple);
            Fruit Strawberry = new Fruit("Strawberry",R.drawable.strawberry_pic);
            fruitList.add(Strawberry);
            Fruit Cherry = new Fruit("Cherry", R.drawable.cherry_pic);
            fruitList.add(Cherry);
            Fruit Mango = new Fruit("Mango",R.drawable.mango_pic);
            fruitList.add(Mango);

        }
    }
}

利用initFruits()方法去初始化水果数据。遍历两边是为了充满整个屏幕，但是上述代码还有一些运行效率的问题。

首先是在适配器中的getView()方法，每次都将布局重新加载了一遍。

getView()方法中有一个convertView参数，这个参数可以将之前加载好的布局进行缓存，以便之后可以进行重用。

public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
        } else {
            view = convertView;
        }
        Log.d("当前的position是", "" + position);
        Log.d("当前的view是", "" + view);
        Log.d("当前的resourceId=", "" + resourceId);
        ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
        TextView fruitname = (TextView) view.findViewById(R.id.fruit_name);
        fruitImage.setImageResource(fruit.getImageId());
        fruitname.setText(fruit.getName());
        return view;
    }

上述代码在实测时候，resourceId都是同一个，不太理解这个resoureId的含义
View都是不同的实例，不理解这样优化的意义在哪？。

虽然此时不会再重复去加载布局，但是每次都会调用view的findViewById()获取一个控件的实例，可以借助一个ViewHolder进行优化。

public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view;
        ViewHolder viewHolder;
        if (convertView == null) {
            view = LayoutInflater.from(getContext()).inflate(resourceId, parent, false);
            viewHolder = new ViewHolder();
            viewHolder.fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
            viewHolder.fruitName = (TextView) view.findViewById(R.id.fruit_name);
            view.setTag(viewHolder); // 将ViewHolder存储在view中
        } else {
            view = convertView;
            viewHolder = (ViewHolder) view.getTag();  // 重新获取ViewHolder
        }
        Log.d("当前的position是", "" + position);
        Log.d("当前的view是", "" + view);
        Log.d("当前的resourceId=", "" + resourceId);
        viewHolder.fruitImage.setImageResource(fruit.getImageId());
        viewHolder.fruitName.setText(fruit.getName());
        return view;
    }

    class ViewHolder {
        ImageView fruitImage;
        TextView fruitName;
    }

利用内部类ViewHolder对控件的实例进行缓存。

2.12 ListView的点击事件

与前面单个控件的点击事件类似，但是这里是List，方法名有一些差别

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initFruits();
        FruitAdapter adapter = new FruitAdapter(MainActivity.this,
                R.layout.fruit_item,fruitList);

        ListView listView = (ListView) findViewById(R.id.list_view);
        listView.setAdapter(adapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Fruit fruit = fruitList.get(position);
                Toast.makeText(MainActivity.this,fruit.getName(),
                        Toast.LENGTH_SHORT).show();

            }
        });
    }

2.13 RecyclerView

增强版ListView，ListView效率低，拓展性差。官方现在更加推荐使用RecyclerView
首先也是为RecyclerView准备一个适配器，Fruit类和fruit_item.xml跟上一节类似

public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> {

    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(View view) {
            super(view);
            fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
            fruitName = (TextView) view.findViewById(R.id.fruit_name);
        }
    }

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).
                inflate(R.layout.fruit_item, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitImage.setImageResource(fruit.getImageId());
        holder.fruitName.setText(fruit.getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }
}

首先定义了一个内部类ViewHolder，继承自RecyclerView.ViewHolder，然后ViewHolder的构造函数要传入一个view参数，这个参数通常是RecyclerView子项的最外层布局

FruitAdapter也有一个构造函数，将展示的数据局赋给一个全局变量mFruitList

接下来需要重写三个方法
onCreateViewHolder()方法用于创建ViewHolder实例，首先将fruit_item布局加载进来，然后执行构造函数，最后将实例返回。
onBindViewHolder()方法用于对RecyclerView子项的数据赋值，每个子项被滚动到屏幕内时会被执行，首先得到当前position的实例，再将数据设置到ViewHolder的ImageView和TextView中。
getItemCount()方法就是返回RecylerView的大小

实际测试中发现，viewholder刚开始创建以后，后面就再也不会调用了，每次滑动的时候，position发生改变，并调用后面两个方法。

2.14 RecyclerView的横向滚动

修改fruit_item.xml排列方式改成垂直

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>

    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="10dp"
        />
</LinearLayout>

修改主活动代码，加一行

        linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
        设置布局的排列方式为横行排列，默认是纵向的。

RecyclerView的布局排列交给了LayoutManager，只要按照接口的规范去实现，就能定制出不同排列方式的布局。

2.15 RecyclerView的点击事件

不同于ListView，RecyclerView没有提供类似与setOnItemClickListener()这样的注册监听器方法，而是需要我们自己给子项具体的View去注册点击事件。

前面讲到的控件Button、TextView和ListView等，都可以直接得到控件实例以后，调用setxxxListener()方法，但是RecyclerView不行，需要自己得到view以后，再调用对应的控件的监听器方法。

在这里实际测试过程中，会发现ImageView点击要么没反应，要么注册事件直接启动失败

参考：如果在ImageView中和LinearLayout同时设置点击事件，会发现触发的是ImageView的点击事件，说明点击事件被子控件ImageView消耗了。这涉及到事件分发的机制，简述下解决方案：在XML布局文件中的LinearLayout项设置android:clickable=“true”，ImageView设置android:clickable=“false”。
采用这种方案的话最好将LinearLayout下所有子控件的都设置为不可点击。属于比较麻烦的方法。

@NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).
                inflate(R.layout.fruit_item, parent, false);
        final ViewHolder holder = new ViewHolder(view);
        holder.fruitView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(), "YOu clicked view" + fruit.getName(),
                        Toast.LENGTH_SHORT).show();
            }
        });
        Log.d("holder.fruitView","="+holder.fruitView);
        Log.d("holder.fruitImage","="+holder.fruitImage);
        Log.d("holder.fruitName","="+holder.fruitName);
        holder.fruitImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Fruit fruit = mFruitList.get(position);
                Toast.makeText(v.getContext(), "You clicked image " + fruit.getName(),
                        Toast.LENGTH_SHORT).show();

            }
        });
        Log.d("当前holder是", "" + holder);
        return holder;
    }