Android pri (20)

Android Basics: Multiscreen Apps

Lesson 3: Images & Visual Polish

Plan

  • 这一节中我们要做的首先就是将图片加到每个单词的前面去,这需要我们修改一下list_item.xml文件,并在其中加上ImageView。因为这个是我们在wordAdapter.java中用到的布局文件,并且每个list item都是按照这个布局文件来变成实际的视图对象的!

Plan how to modify Word Class

  • 因为我们还想存储每个单词它们对应的图片,一开始我是想到了R.drawable.xxx,但是我在想这个到底是什么类型的呢?是String吗?后来发现,是integer!
  • 那么我们就只要在Word.java中加上imageResourceID这个变量以及它的get,set方法就好了,要注意它是int类型哦!

Modify the WordAdapter

  • 接下来,我们要修改一下Adapter中的内容了,因为在list_item.xml中有一个ImageView,所以我们也需要设置一下对应的ImageView是哪一个。

Fix to hide image

  • 因为我们其中有一个Activity是没有图片的,所以我们这里要进行判断一下是否有R.drawable.xxx这个int类型的id被分配,如果没有分配的话,那么我们需要将list_item.xml中的ImageView设置成为不可见(这里用到一个新的方法,是setVisibility)。
  • setVisibility
  • 这里面有三个属性我们需要大概的知道一下:(INVISIBLE, VISIBLE, GONE)

Visual Polish

  • 在这一部分就是给我们的app进行界面的美化以及设计合理的布局啦!
  • 可以在手机里面的开发者选项中选择“显示布局边界”从而帮助我们更好的观察!

Show Different Background

  • 原来为不同的layout而动态改变background这么简单,我们只需要将颜色的ResourceID传到Adapter中,然后并保存到变量中,然后我们再在list_item.xml中设置一下我们想要改变背景的LinearLayout的id,然后在Adapter中找到它,最后再linearLayout.setBackgroundResource(colorResourceID); 就好啦~

主要代码

  • MainActivity.java
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    /*
    * Copyright (C) 2016 The Android Open Source Project
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    */
    package com.example.android.miwok;
    import android.content.Intent;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.widget.TextView;
    public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the content of the activity to use the activity_main.xml layout file
    setContentView(R.layout.activity_main);
    TextView numbers = (TextView) findViewById(R.id.numbers);
    // Set a onClick Listener on that View
    numbers.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    Intent numbersIntent = new Intent(MainActivity.this, NumbersActivity.class);
    startActivity(numbersIntent);
    }
    });
    TextView family = (TextView) findViewById(R.id.family);
    family.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    Intent familyIntent = new Intent(MainActivity.this, FamilyActivity.class);
    startActivity(familyIntent);
    }
    });
    TextView colors = (TextView) findViewById(R.id.colors);
    colors.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    Intent colorsIntent = new Intent(MainActivity.this, ColorsActivity.class);
    startActivity(colorsIntent);
    }
    });
    TextView phrases = (TextView) findViewById(R.id.phrases);
    phrases.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
    Intent phrasesIntent = new Intent(MainActivity.this, PhrasesActivity.class);
    startActivity(phrasesIntent);
    }
    });
    }
    }

  • activity_main.xml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Copyright (C) 2016 The Android Open Source Project
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    -->
    <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/tan_background"
    android:orientation="vertical"
    tools:context="com.example.android.miwok.MainActivity">
    <TextView
    android:id="@+id/numbers"
    style="@style/CategoryStyle"
    android:background="@color/category_numbers"
    android:text="@string/category_numbers" />
    <TextView
    android:id="@+id/family"
    style="@style/CategoryStyle"
    android:background="@color/category_family"
    android:text="@string/category_family" />
    <TextView
    android:id="@+id/colors"
    style="@style/CategoryStyle"
    android:background="@color/category_colors"
    android:text="@string/category_colors" />
    <TextView
    android:id="@+id/phrases"
    style="@style/CategoryStyle"
    android:background="@color/category_phrases"
    android:text="@string/category_phrases" />
    </LinearLayout>

  • list_item.xml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/list_item_linearlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/tan_background"
    android:minHeight="@dimen/list_item_height"
    android:orientation="horizontal">
    <ImageView
    android:id="@+id/image"
    android:layout_width="@dimen/list_item_height"
    android:layout_height="@dimen/list_item_height"
    tools:src="@mipmap/ic_launcher" />
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/list_item_height"
    android:orientation="vertical"
    android:id="@+id/list_item_linearlayout2"
    android:paddingLeft="16dp">
    <TextView
    android:id="@+id/miwok_text_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="bottom"
    android:textColor="#FFFFFF"
    android:textSize="18sp"
    android:textStyle="bold"
    tools:text="lutti" />
    <TextView
    android:id="@+id/default_text_view"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:gravity="top"
    android:textColor="#FFFFFF"
    tools:text="one" />
    </LinearLayout>
    </LinearLayout>

  • Word.java
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    package com.example.android.miwok;
    /**
    * Created by hclmaster on 2017/1/20.
    */
    public class Word {
    private String mDefaultTranslation;
    private String mMiwokTranslation;
    private int imageResourceID = -1;
    public Word(String mDefaultTranslation, String mMiwokTranslation) {
    this.mDefaultTranslation = mDefaultTranslation;
    this.mMiwokTranslation = mMiwokTranslation;
    }
    public Word(String mDefaultTranslation, String mMiwokTranslation, int imageResourceID) {
    this.imageResourceID = imageResourceID;
    this.mDefaultTranslation = mDefaultTranslation;
    this.mMiwokTranslation = mMiwokTranslation;
    }
    public String getmDefaultTranslation() {
    return mDefaultTranslation;
    }
    public String getmMiwokTranslation() {
    return mMiwokTranslation;
    }
    public int getImageResourceID() {
    return imageResourceID;
    }
    public void setmDefaultTranslation(String mDefaultTranslation) {
    this.mDefaultTranslation = mDefaultTranslation;
    }
    public void setmMiwokTranslation(String mMiwokTranslation) {
    this.mMiwokTranslation = mMiwokTranslation;
    }
    public void setImageResourceID(int imageResourceID) {
    this.imageResourceID = imageResourceID;
    }
    /**
    * Return whether or not there is an image for this word!
    * @return
    */
    public boolean hasImage(){
    return imageResourceID != -1;
    }
    }

  • WordAdapter.java
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    package com.example.android.miwok;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    import java.util.List;
    /**
    * Created by hclmaster on 2017/1/20.
    */
    public class WordAdapter extends ArrayAdapter<Word> {
    private int colorResourceID;
    // 虽然这里创建的默认构造方法是有三个参数的
    // 但是你可以把中间那个resource删掉,因为我们这里用不到!
    public WordAdapter(Context context, List<Word> objects, int colorResourceID) {
    super(context, 0, objects);
    this.colorResourceID = colorResourceID;
    }
    // convertView:是需要被填充的回收视图!
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
    // Get the data item for this position
    Word word = getItem(position);
    // 检查现有视图是否为空,否则扩充视图!
    // 一般来说,一开始打开Activity的时候,一般都是没有可以重用的图的!
    if (convertView == null) {
    // 如果为null的话,那么我们就从list_item中隐式的展开视图
    // 其实就是将XML布局文件变成实际的视图对象
    convertView = LayoutInflater.from(getContext()).inflate(R.layout.list_item, parent, false);
    }
    TextView tvMiwok = (TextView) convertView.findViewById(R.id.miwok_text_view);
    TextView tvDefault = (TextView) convertView.findViewById(R.id.default_text_view);
    ImageView imageView = (ImageView) convertView.findViewById(R.id.image);
    tvMiwok.setText(word.getmMiwokTranslation());
    tvDefault.setText(word.getmDefaultTranslation());
    // 这里的作用是用来判断这个word是不是有image被分配的
    // 这样就方便了我们将PhrasesActivity和其他Activity分开来!
    if(word.hasImage() != true) {
    imageView.setVisibility(View.GONE);
    } else{
    imageView.setVisibility(View.VISIBLE);
    imageView.setImageResource(word.getImageResourceID());
    }
    LinearLayout linearLayout = (LinearLayout)convertView.findViewById(R.id.list_item_linearlayout2);
    linearLayout.setBackgroundResource(colorResourceID);
    return convertView;
    }
    }

  • NumbersActivity.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    package com.example.android.miwok;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.widget.ListView;
    import java.util.ArrayList;
    public class NumbersActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.word_list);
    ArrayList<Word> words = new ArrayList<Word>();
    words.add(new Word("one", "lutti", R.drawable.number_one));
    words.add(new Word("two", "otiiko", R.drawable.number_two));
    words.add(new Word("three", "tolookosu", R.drawable.number_three));
    words.add(new Word("four", "oyyisa", R.drawable.number_four));
    words.add(new Word("five", "massokka", R.drawable.number_five));
    words.add(new Word("six", "temmokka", R.drawable.number_six));
    words.add(new Word("seven", "kenekaku", R.drawable.number_seven));
    words.add(new Word("eight", "kawinta", R.drawable.number_eight));
    words.add(new Word("nine", "wo'e", R.drawable.number_nine));
    words.add(new Word("ten", "na'aacha", R.drawable.number_ten));
    WordAdapter wordAdapter = new WordAdapter(this, words, R.color.category_numbers);
    ListView listView = (ListView) findViewById(R.id.list);
    // 这样我们就能够往其中进行填充数据了!
    listView.setAdapter(wordAdapter);
    }
    }
  • 效果

  • Markdown
  • Markdown
  • Markdown
  • Markdown
  • Markdown

热评文章