Android开发（一）---基本的UI布局典例

最新推荐文章于 2022-03-19 21:56:35 发布

zhiguo98

最新推荐文章于 2022-03-19 21:56:35 发布

阅读量241

点赞数

分类专栏： Android开发从入门到精通

本文链接：https://blog.csdn.net/yanzhiguo98/article/details/90262391

版权

Android开发从入门到精通专栏收录该内容

13 篇文章 0 订阅

订阅专栏

刚刚学完Java，现开始学Android，Android的知识点很多，因此，这一系列的博客记录一些常用的Android组件和应用，这样以后就不用重复的造轮子，还有就是自己时间太少了，综合这两方面，决定来写Android博客。

需求：

创建一个Demo，用户在登陆界面输入账号和密码进行登陆验证，验证正确后跳入首页，在首页窗口有子菜单，菜单有两个选项点击菜单一弹出Toast，点击菜单二弹出一个新窗口，该窗口的三分之一显示标题，三分之二窗口，显示详细内容，当用户点击左边标题，右边显示详细内容。

首先创建项目，在activity_main.xml中进行UI布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat 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="com.example.yzg.firstapp.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/denglu"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"/>

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:layout_margin="10dp">

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="账号："
           android:textSize="25dp"
           android:textStyle="bold"
           android:layout_margin="5dp"
           />
       <EditText
           android:id="@+id/username"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="请输入手机号/邮箱地址"
           android:background="@drawable/backgroung_edittext"
           android:textSize="25dp"/>

   </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码："
            android:textSize="25dp"
            android:textStyle="bold"
            android:layout_margin="5dp"
            />

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="textPassword"
            android:background="@drawable/backgroung_edittext"
            android:textSize="25dp"/>
    </LinearLayout>

    <Button
        android:id="@+id/login_bt"
        android:layout_width="100dp"
        android:layout_height="60dp"
        android:text="登陆"
        android:textSize="25dp"

        android:layout_gravity="center_horizontal"
        android:layout_margin="10dp"
        android:background="@drawable/background_buton"

        />

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

对于上面的android:background="@drawable/background_buton"，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape >
            <!--背景色-->
            <solid android:color="@color/slategray"></solid>
            <!--边框的弧度-->
            <corners android:radius="3dp"></corners>
            <!--边框的线宽和颜色-->
            <stroke android:width="1dp" android:color="@color/slategray"></stroke>

        </shape>
    </item>


    <item android:state_pressed="false" >
        <shape>
            <solid android:color="@color/beige" ></solid>
            <corners android:radius="3dp"></corners>
            <stroke android:width="1dp" android:color="@color/ghostwhite"></stroke>

        </shape>
    </item>


</selector>

对于上面的android:background="@drawable/backgroung_edittext"，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/ghostwhite"></solid>
            <corners android:radius="3dp"></corners>
            <stroke android:color="@color/slategray" android:width="1dp"></stroke>
        </shape>
    </item>
    <item android:state_focused="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/ghostwhite"></solid>
            <corners android:radius="3dp"></corners>
            <stroke android:color="@color/ghostwhite" android:width="1dp"></stroke>
        </shape>
    </item>
</selector>

这也登陆界面就做好了，下面是MainActivity的代码部分：

package com.example.yzg.firstapp;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {


    //定义子控件
    private EditText musername;
    private EditText mpassword;
    private Button login_bt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //为子控件赋值

        musername = findViewById(R.id.username);
        mpassword = findViewById(R.id.password);
        login_bt = findViewById(R.id.login_bt);

        //为登录按钮设置监听器
        login_bt.setOnClickListener(new loginClick());

    }

    private class loginClick implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            String username = musername.getText().toString();
            String password = mpassword.getText().toString();
            if (username==null||username.equals("")){
                Toast.makeText(MainActivity.this,"用户名不能为空！",Toast.LENGTH_SHORT).show();
            }else if (password==null||password.equals("")){
                Toast.makeText(MainActivity.this,"密码不能为空！",Toast.LENGTH_SHORT).show();
            }else if (username.equals("yanzhiguo")&&password.equals("123")){
                Intent intent = new Intent(MainActivity.this, ShouyeActivity.class);
                startActivity(intent);
            }else {
                Toast.makeText(MainActivity.this,"用户名或密码不正确！",Toast.LENGTH_SHORT).show();
            }
        }
    }
}

在登陆后的界面的布局activity_shouye.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat 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="com.example.yzg.firstapp.ShouyeActivity">

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

    </LinearLayout>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="vertical">

    </LinearLayout>


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

首页的ShouyeActivity：

package com.example.yzg.firstapp;

import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.TransitionManager;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class ShouyeActivity extends AppCompatActivity {

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


    /**
     * 菜单选项
     * @param menu
     * @return
     */

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        menu.add(1,1,1,"菜单一");
        menu.add(1,2,2,"展示新闻选项");
        return super.onCreateOptionsMenu(menu);

    }


    /**
     * 给菜单指定相应的相应方法
     * @param item
     * @return
     */

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case 1:
                Toast.makeText(ShouyeActivity.this,"这是菜单选项一",Toast.LENGTH_SHORT).show();
                break;
                //为界面添加Button选项
            case 2:
                FragmentManager fragmentManager = getFragmentManager();
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
                ButtonFragment buttonFragment = new ButtonFragment();
                fragmentTransaction.add(R.id.left,buttonFragment);
                fragmentTransaction.commit();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }


}

Xinwen1Fragment文件：

package com.example.yzg.firstapp;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Xinwen1Fragment extends Fragment {


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_xinwen1, null);
    }

}

fragment_xinwen1.xml文件:

<FrameLayout 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"
    tools:context="com.example.yzg.firstapp.Xinwen1Fragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="xinwen1111111111" />

</FrameLayout>

结果的整体表现：