微信界面初探之AS开发(一)应用界面构建

界面开发：以微信为例

实验目的：

• 熟悉Android Studio开发环境，掌握其基本操作。
• 学习使用XML布局文件设计界面。
• 掌握Activity之间的跳转和数据传递。

实验步骤：

1. 打开Android Studio，新建一个项目。

2. 选择“Empty Activity”模板，然后点击“Next”。

3. 输入项目名称和包名，然后点击“Finish”。

4. 在项目中添加一个新的XML布局文件，命名为“activity_main.xml”。

5. 在“activity_main.xml”文件中添加以下代码：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="消息" />

        <Button
            android:id="@+id/btn_friend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="好友" />

        <Button
            android:id="@+id/btn_address_book"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="通讯录" />

        <Button
            android:id="@+id/btn_setting"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="设置" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

6. 在“MainActivity.java”文件中添加以下代码：

public class MainActivity extends AppCompatActivity {

    private Button btnMessage;
    private Button btnFriend;
    private Button btnAddressBook;
    private Button btnSetting;
    private FrameLayout flContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnMessage = findViewById(R.id.btn_message);
        btnFriend = findViewById(R.id.btn_friend);
        btnAddressBook = findViewById(R.id.btn_address_book);
        btnSetting = findViewById(R.id.btn_setting);
        flContent = findViewById(R.id.fl_content);

        btnMessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 跳转到消息界面
            }
        });

        btnFriend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 跳转到好友界面
            }
        });

        btnAddressBook.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 跳转到通讯录界面
            }
        });

        btnSetting.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO: 跳转到设置界面
            }
        });
    }
}

7. 运行项目，即可看到一个如下图所示的界面。

界面转换：

实现界面转换，可以使用以下几种方式：

• Intent： 使用Intent来启动新的Activity。
• Fragment： 使用Fragment来实现界面切换。
• ViewPager： 使用ViewPager来实现界面切换。

实验步骤：

1. 使用Intent来实现界面转换。

在“MainActivity.java”文件中，添加以下代码：

btnMessage.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this, MessageActivity.class);
        startActivity(intent);
    }
});

2. 在“res/layout”目录下创建“activity_message.xml”文件，并添加以下代码：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="消息" />

</LinearLayout>

3. 在“res/values”目录下创建“strings.xml”文件，并添加以下代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">微信</string>
</resources>

4. 在“AndroidManifest.xml”文件中添加以下代码：

<activity
    android:name=".MessageActivity"
    android:label="@string/app_name" />

5. 运行项目，点击“消息”按钮，即可跳转到消息界面。

效果展示：

总结：

• 本实验通过一个简单的例子，介绍了如何使用AS开发微信界面。
• 学习了如何使用XML布局文件设计界面，如何使用Activity之间的跳转和数据传递。
• 掌握了使用Intent实现界面转换。