Android的入门实验一

一、实验目的

1.掌握布局的组合使⽤⽅式；

2.掌握VectorAsset资源的使⽤⽅式；

3.掌握ImageView、View等控件的使⽤⽅式；

4.掌握ListView控件的基本⽤法；

5.掌握ListView⾃定义Item布局的⽅法；

6.掌握ArrayAdapter的基本⽤法及⾃定义Adapter的⽅法；

7.掌握CardView控件的基本⽤法；

二、实验内容

（1）创建登录布局⽂件并对根据要求对布局进⾏设置；

步骤一，创建工程

启动 Android Studio ，创建⼯程。根据 Android Studio 中的 Create New Project 向导，选择 “Empty Activity”（空⽩活动），为新建的⼯程添加⼀个空⽩的活动（ Activity ）。

步骤二，构建登录页面布局

在 activity_login.xml 中设置布局，其中页面分为上中下三个布局，上部是登录界面的logo图片，中部是账号和密码输入框，底部则是登录按钮。

步骤三，添加查看密码

⽤户点击密码栏中的密码明⽂切换图标时，可将密码 EditText 控件中的输⼊类型进⾏切换。进而实现查看密码的功能。

                        图1.输入信息结果图                                                                                          图2.显示信息结果图

（2）Android项目——新闻列表

步骤一，新建一个名为Main2Activity的Activity

根据 Android Studio 中的 Create New Project 向导，选择 “Empty Activity”（空⽩活动），为新建的⼯程添加⼀个空⽩的活动（ Main2Activity）。

步骤二，更改AndroidManifest.xml里的启动默认Activity

把LoginActivity的activity标签里的intent-filter标签剪切到Main2Activity的activity标签里。

代码activity_login.xml

步骤三，对activity_main2.xml进行布局

利用ListView 作为根容器的唯⼀⼦控件对activity_main2.xml进行布局。

代码activity_main2.xml

步骤四，为ListView导入数据源

把新闻数据放到arrays.xml这个资源文件里，加入title和author两个字符串数组

代码arrays.xml

步骤五，构造Adapter对象

通过Adapter对象可以对ListView控件设置数据适配器，绑定每个Item对应的布局

代码Main2Activity.java

步骤六，编译部署运行结果

                                                                                         图3.展示新闻标题

步骤七，展示新闻标题及作者信息

设置SimpleAdapter 适配器构造函数的使⽤，构造数据源List的对象，用来替换原来的数组，将数据源的构造操作放⼊initData()⽅法中。

代码Main2Activity.java

                                                                                          图4.展示新闻标题和作者

步骤九，加入图片并且显示

使用⾃定ListView的Item布局，在 ListView 控件中的每⼀列中显⽰所⽰新闻图⽚、标题、作者样式。

代码list_item.xml 布局

步骤十，构建NewsAdapter适配器类

首先创建一个News 类⽤于存储新闻的标题、作者、新闻正⽂、对应的标题图。然后构建NewsAdapter适配器类。使⽤ LayoutInflater 加载完成布局后，可分别绑定新闻标题、新闻作者、新闻标题图控件。并根据 position 取到的 News 对象设置这三个控件的属性，从⽽完成当前 Item 对应的布局的加载及数据绑定操作。

代码NewsAdapter.java

步骤十一，用News类来作数据源的构造方式

用List<News> newsList来作为加载数据的集合，改写initData函数，重写onCreate函数。

代码Main2Activity.java

步骤十二，运行加图后的结果

                                                                                   图5.展示新闻标题、作者和图片

三、实验总结

通过这次实验，我学到了许多新的控件，比如利用ListView自定义Item的布局，可以使布局更加简易。再利用Adapter的方法，使得动态加载数据更加方便，前后端交互更加便捷，并且创造对应的模型对象类能够更好的封装数据。(当时写的真短，难怪拿不了高分)

<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:orientation="vertical"

    tools:context=".LoginActivity">

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:layout_marginTop="48dp">

        <ImageView

            android:layout_width="108dp"

            android:layout_height="108dp"

            android:src="@mipmap/ic_logo"

            android:layout_centerInParent="true"

            />

    </RelativeLayout>

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_marginTop="48dp">

        <ImageView

            android:layout_width="32dp"

            android:layout_height="32dp"

            android:layout_marginBottom="4dp"

            android:layout_marginLeft="10dp"

            android:layout_alignParentBottom="true"

            android:src="@drawable/ic_person_outline_black_24dp"/>

        <EditText

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginBottom="1dp"

            android:layout_alignParentBottom="true"

            android:layout_gravity="center"

            android:inputType="text"

            android:hint="Email/Account"

            android:layout_marginStart="48dp"

            android:layout_marginEnd="48dp"

            android:maxLines="1"/>

    </RelativeLayout>

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="40dp"

        android:layout_marginTop="16dp">

        <ImageView

            android:layout_width="32dp"

            android:layout_height="32dp"

            android:layout_marginBottom="4dp"

            android:layout_marginLeft="10dp"

            android:layout_alignParentBottom="true"

            android:src="@drawable/ic_lock_outline_black_24dp"/>

        <EditText

            android:id="@+id/et_pwd"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginBottom="1dp"

            android:layout_alignParentBottom="true"

            android:inputType="textPassword"

            android:hint="Password"

            android:layout_marginStart="48dp"

            android:layout_marginEnd="48dp"

            android:maxLines="1"/>

        <ImageView

            android:id="@+id/iv_pwd_switch"

            android:layout_width="24dp"

            android:layout_height="24dp"

            android:layout_marginBottom="6dp"

            android:layout_marginRight="20dp"

            android:layout_alignParentBottom="true"

            android:layout_alignParentEnd="true"

            android:src="@drawable/ic_visibility_off_black_24dp"/>

    </RelativeLayout>

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_marginBottom="32dp"

        android:layout_weight="1"

        android:layout_height="wrap_content">

        <Button

            android:text="Login"

            android:textColor="@android:color/white"

            android:background="@color/colorPrimary"

            android:layout_marginTop="32dp"

            android:layout_alignParentTop="true"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"/>

    </RelativeLayout>

</LinearLayout>

public class LoginActivity extends AppCompatActivity {

    private Boolean bPwdSwitch = false;

    private EditText etPwd;

    @Override

    protected void onCreate(Bundle savedInstanceState){

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        final ImageView ivPwdSwitch = findViewById(R.id.iv_pwd_switch);

        etPwd = findViewById(R.id.et_pwd);

        ivPwdSwitch.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                bPwdSwitch = !bPwdSwitch;

                Log.d("LoginActivity","111");

                if (bPwdSwitch) {

                    ivPwdSwitch.setImageResource(R.drawable.ic_visibility_black_24dp);

                    etPwd.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

                } else {

                    ivPwdSwitch.setImageResource(R.drawable.ic_visibility_off_black_24dp);

                    etPwd.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD | InputType.TYPE_CLASS_TEXT);

                    etPwd.setTypeface(Typeface.DEFAULT);

                }

            }

        });

    }

}

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout

    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"

    tools:context=".Main2Activity">

    <ListView

        android:id="@+id/lv_news_list"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:padding="8dp"

    app:cardCornerRadius="8dp"

    >

    <RelativeLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <ImageView

            android:id="@+id/iv_image"

            android:layout_width="match_parent"

            android:layout_height="128dp"

            android:scaleType="centerCrop"

            />

        <TextView

            android:id="@+id/tv_title"

            style="@style/TextAppearance.AppCompat.Subhead"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_below="@id/iv_image"

            android:paddingTop="8dp"

            android:paddingStart="8dp"

            android:paddingBottom="4dp"

            android:textColor="@color/colorPrimary"

            android:textSize="18sp"

            android:textStyle="bold" />

        <TextView

            android:id="@+id/tv_subtitle"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_below="@id/tv_title"

            android:paddingStart="8dp"

            android:paddingBottom="4dp"

            android:textColor="@android:color/secondary_text_light"

            style="@style/TextAppearance.AppCompat.Subhead"/>

    </RelativeLayout>

</android.support.v7.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string-array name="article_title">

       ……..

       <item>Who Invented The Pen?</item>

<item>What Is The Origin Of Silk Fabric? </item>

</string-array>

……..

<string-array name="contents">

    <item>We think the tomato is a vegetable, but it is actually a fruit. Because it is not sweet and is used for providing flavour to food, we think of it as a vegetable.\n\nThe tomato is originally

……..

</item>

</string-array>

</resources>

public class News {

    private String mTitle;

    private String mAuthor;

    private String mContent;

    private int mImageId;

    public String getmTitle() {

        return mTitle;

    }

    public void setmTitle(String mTitle) {

        this.mTitle = mTitle;

    }

    public String getmAuthor() {

        return mAuthor;

    }

    public void setmAuthor(String mAuthor) {

        this.mAuthor = mAuthor;

    }

    public String getmContent() {

        return mContent;

    }

    public void setmContent(String mContent) {

        this.mContent = mContent;

    }

    public int getmImageId() {

        return mImageId;

    }

    public void setmImageId(int mImageId) {

        this.mImageId = mImageId;

    }

}

public class NewsAdapter extends ArrayAdapter<News> {

    private List<News> mNewDate;

    private Context mContext;

    private int resourceId;

    public NewsAdapter(Context context, int resource, List<News> data) {

        super(context, resource, data);

        this.mContext = context;

        this.mNewDate = data;

        this.resourceId = resource;

    }

    @Override

    public View getView(int position, View convertView, ViewGroup parent){

        News news= (News) getItem(position);

        View view;

        view=LayoutInflater.from(getContext()).inflate(resourceId,parent,false);

        TextView tvTitle=view.findViewById(R.id.tv_title);

        TextView tvAuthor=view.findViewById(R.id.tv_subtitle);

        ImageView ivImage=view.findViewById(R.id.iv_image);

        tvTitle.setText(news.getmTitle());

        tvAuthor.setText(news.getmAuthor());

        ivImage.setImageResource(news.getmImageId());

        return view;

    }

}

public class Main2Activity extends AppCompatActivity {

    private static final String NEWS_TITLE = " news_title " ;

    private static final String NEWS_AUTHOR = "news_author" ;

    private List<Map<String, String>> dataList = new ArrayList<>();

    private String []titles = null ;

    private String []authors = null ;

    public static final String NEWS_ID = "news_id";

    private List<News> newsList = new ArrayList <>();

//

//

//

//    @Override

//    protected void onCreate ( Bundle savedInstanceState ) {

//        super.onCreate(savedInstanceState) ;

//        setContentView(R.layout.activity_main2);

//

//////        第一张图

////        titles = getResources().getStringArray(R.array.article_title);

////        authors = getResources().getStringArray(R.array.authors) ;

////

////        ArrayAdapter<String> adapter = new ArrayAdapter<String>(Main2Activity.this,android.R.layout.simple_list_item_1,titles);

////

////        ListView lvNewsList = findViewById (R.id .lv_news_list ) ;

////        lvNewsList.setAdapter(adapter);

//

////        第二张图

//        initData();

//

//        SimpleAdapter simpleAdapter=new SimpleAdapter(Main2Activity.this,dataList,

//            android.R.layout.simple_list_item_2,

//            new String[]{NEWS_TITLE,NEWS_AUTHOR},

//            new int[]{android.R.id.text1,android.R.id.text2});

//

//        ListView lvNewsList=findViewById(R.id.lv_news_list);

//        lvNewsList.setAdapter(simpleAdapter);

//

//

//    }

//    第三张图

    @Override

    protected void onCreate(Bundle savedInstanceState){

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main2);

        initData();

        NewsAdapter newsAdapter = new NewsAdapter ( Main2Activity.this ,R.layout.list_item, newsList ) ;

        ListView lvNewsList = findViewById (R.id.lv_news_list);

        lvNewsList.setAdapter(newsAdapter);

    }

//    private void initData () {

////        第二张

//        int length ;

//        titles = getResources ().getStringArray(R.array.article_title) ;

//        authors = getResources ().getStringArray(R.array.authors ) ;

//

//        if(titles.length > authors.length ) {

//            length = authors.length ;

//        } else {

//            length = titles.length ;

//        }

//

//        for ( int i = 0; i < length ; i++) {

//            Map map = new HashMap( ) ;

//            map. put (NEWS_TITLE,titles[i] );

//            map. put (NEWS_AUTHOR,authors [i]);

//

//            dataList.add(map) ;

//        }

//

//

//    }

//    第三张图

    private void initData () {

        int length ;

        titles = getResources().getStringArray(R.array.article_title);

        authors = getResources().getStringArray(R.array.authors);

        TypedArray images = getResources().obtainTypedArray(R.array.images);

        if(titles.length > authors.length) {

            length = authors.length ;

        }else {

            length = titles.length ;

        }

        for( int i = 0; i < length ; i++) {

            News news = new News () ;

            news.setmTitle(titles[i]); ;

            news.setmAuthor(authors[i]); ;

            news.setmImageId(images.getResourceId(i,0));

            newsList.add( news ) ;

        }

    }

}