Android UI项目一: 商家信息应用

---

1.项目简介

设计并实现一款单屏应用，用来显示关于一家虚拟小型商家的信息。本小项目中就是一个书城的小页面。

2.作品展示

1.png 2.png

3.需要掌握的知识

• xml 布局
• 利用 LinearLayout 和 RelativeLayout 布局
• 控制字体和视图大小的 sp 和 dp 单位
• TextView 和 ImageView 两个控件的运用

4.知识代码详解

1.思路：首先对于页面的拆分到底是用相对还是绝对布局，本例中采用相对布局较为灵活些也可以混合使用。RelativeLayout的属性先来介绍主要分为三大部分：

(1)相对于父布局的：alignParent定位在父布局中的上下左右中；

(2)相对于控件布局的：toRightOf引用控件id就可以，控件注意定义的先后顺序；

(3)进行控件的对齐布局的：alignLeft相对控件的左侧对齐，上下对齐；

2.ImageView的放大属性使用：android:scaleType="centerCrop" 是按比例扩大图片的size居中显示，使得图片长(宽)等于或大于View的长(宽)，不会直接裁剪和原图不一致的。

3.Intent的使用：进行跳转先要在manifest文件中注册，然后创建意图对象进行跳转，这里使用的显式意图跳转，还能传输数据到下个activity中,下个activity获得上一个意图对象调用getExtra方法就可以

    Intent intent = new Intent(MainActivity.this,Zhongshuge.class);
    intent.putExtra("data","这是给杭州钟书阁的");
    startActivity(intent);
    Toast.makeText(MainActivity.this,"you had into zhongshuge!",Toast.LENGTH_SHORT).show();

4.整个项目的源码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kevin.abnd_shop_info.MainActivity">

    <ImageView
        android:id="@+id/image_view1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/p1" />

    <TextView
        android:id="@+id/title_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="@string/title"
        android:background="#40000000"
        android:textColor="@android:color/primary_text_dark"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/summary_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/title_text_view"
        android:layout_margin="8dp"
        android:background="#40000000"
        android:text="@string/summary"
        android:textColor="@android:color/background_light" />

    <ImageView
        android:id="@+id/image_view2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@+id/address_text_view"
        android:layout_alignRight="@id/address_text_view"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="16dp"
        android:scaleType="centerCrop"
        android:src="@drawable/p2" />

    <TextView
        android:id="@+id/time_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/address_text_view"
        android:layout_alignParentBottom="true"
        android:paddingBottom="16dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="8dp"
        android:background="#40000000"
        android:text="@string/time"
        android:textColor="@android:color/background_light" />

    <TextView
        android:id="@+id/phone_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/time_text_view"
        android:layout_alignLeft="@id/address_text_view"
        android:padding="8dp"
        android:text="@string/phone"
        android:background="#40000000"
        android:textColor="@android:color/background_light" />

    <TextView
        android:id="@+id/address_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/phone_text_view"
        android:layout_alignParentRight="true"
        android:padding="8dp"
        android:background="#40000000"
        android:text="@string/address"
        android:textColor="@android:color/background_light" />
</RelativeLayout>

public class MainActivity extends AppCompatActivity {
    //小的图片
    private ImageView imageView2;
    //大的背景图
    private ImageView imageView1;

    public MainActivity() {
        super();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView2 = (ImageView)findViewById(R.id.image_view2);
        imageView1 = (ImageView)findViewById(R.id.image_view1);
        imageView2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //intent数据的传输传输和回传
                Intent intent = new Intent(MainActivity.this,Zhongshuge.class);
                intent.putExtra("data","这是给杭州钟书阁的");
                startActivity(intent);
                Toast.makeText(MainActivity.this,"you had into zhongshuge!",Toast.LENGTH_SHORT).show();
            }
        });
       imageView1.setOnClickListener(new View.OnClickListener() {

           @Override
           public void onClick(View v) {
               //进行数据回传
               Intent intent = new Intent(MainActivity.this,Zhongshuge.class);

               //请求码是1，作为一个标记使用的额
               startActivityForResult(intent,1);
           }
       });

5.反思总结

• 学会使用Google搜索，程序员必备，走出舒适区加强对英文的阅读能力，对于自己的英文不熟悉，要硬逼自己，坚持下去阅读官方文档。
• 每段时间的学习规划好，安排好任务和目标，不给自己设限，试想着实现些其他功能。
• 博客书写，提升执行力，每天感觉进步一点点，从菜鸟开始起飞！PS：从上床不带手机开始，早睡早起提升效率。
  github学习成长博客