《Android进阶》之第六篇 Fragment 的使用2

最近通过学习，对fragment的使用有了新的认识。

一开始接触android的时候，很是受不了这个fragment，总感觉它把一个简单的事情搞复杂啦，所以每次新建工程的时候总是固执的选择empty Activity

但是后来发现这样写出来的代码移植的时候总是要该来该去，现在开始偏爱带fragment的工程向导

向导默认生成一个JAVA文件，和两个布局文件

MainActivity.JAVA

package com.example.tesf;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends Activity {

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

        if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, new PlaceholderFragment())
                    .commit();
        }
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container, false);
            return rootView;
        }
    }

}

布局文件：activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.tesf.MainActivity"
    tools:ignore="MergeRootFrame" />

另外一个布局文件：fragment_main.xml  这个布局文件就可以自己发挥啦

下面演示一个登录注册的功能：

在fragment_main.xml实现登录注册的布局

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fff2f0eb"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="@dimen/height_top_bar"
        android:layout_weight="0"
        android:background="@color/common_top_bar_blue" >

        <TextView
            android:id="@+id/ivTitleName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="登录"
            android:textColor="#ffffffff"
            android:textSize="20.0sp" />
        <ImageButton
            android:id="@+id/ivTitleBtnLeft1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@drawable/top_icon_back" />
         <ImageButton
            android:id="@+id/ivTitleBtnLeft2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:visibility="gone"
            android:background="@drawable/top_icon_menu" />
        
         <TextView
            android:id="@+id/ivTextViewRigh"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:textColor="#ffffffff"
            android:textSize="16.0sp"
            android:text="忘记密码"
            android:clickable="true" />
        
    </RelativeLayout>

    <ViewFlipper 
        android:id="@+id/mainFlipper"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
          <LinearLayout 
            android:id="@+id/content1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:background="@color/login_background"
            android:orientation="vertical" >
                <LinearLayout
                    android:layout_margin="10dp" 
                    android:padding="8dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:orientation="vertical" >
                       <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:orientation="horizontal" 
                            android:background="@drawable/inputbox_bg">
                            <ImageView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                android:src="@drawable/input_phone"    
                                />  
                            <EditText 
                                android:id="@+id/login_number"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="6"
                                android:inputType="phone"
                                android:background="@null"                            
                                android:textSize="15.0sp"
                                android:hint="手机号">
                                 <requestFocus />
                            </EditText>                                                  
                        </LinearLayout>
                        
                       <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:orientation="horizontal"
                            android:layout_marginTop="15dp" 
                            android:background="@drawable/inputbox_bg">
                            <ImageView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                android:src="@drawable/input_key"    
                                />  
                            <EditText 
                                android:id="@+id/login_passward"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:inputType="textPassword"
                                android:layout_weight="6"
                                android:background="@null"                            
                                android:textSize="15.0sp"
                                android:hint="密码"/>                                                                      
                        </LinearLayout>                      
                </LinearLayout>
                 <Button
                    android:id="@+id/loadBtn"
                    style="@style/style_common_btn"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"
                    android:background="@drawable/selector_common_btn"
                    android:text="登录" />
                
                <TextView 
                     android:id="@+id/regster_text"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_margin="8dp"
                     android:clickable="true"
                     android:textColor="@color/common_top_bar_blue"
                     android:text="立即注册"
                    />
          </LinearLayout>
          
          
           <LinearLayout 
                android:id="@+id/content2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_horizontal"
                android:background="@color/login_background"
                android:orientation="vertical" >
                  <LinearLayout 
                android:id="@+id/content2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_horizontal"
                android:background="@color/login_background"
                android:orientation="vertical" >
                 <LinearLayout
                    android:layout_margin="10dp" 
                    android:padding="8dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:orientation="vertical" >
                       <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:orientation="horizontal" 
                            android:background="@drawable/inputbox_bg">
                            <TextView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                android:textColor="@color/common_top_bar_blue"
                                android:text="手机号"    
                                />  
                            <EditText 
                                android:id="@+id/register_number"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="6"
                                android:inputType="phone"
                                android:background="@null"                            
                                android:textSize="15.0sp"
                                android:hint="请输入手机号作为用户名">
                                 <requestFocus />
                            </EditText>                                                  
                        </LinearLayout>
                       <ImageView 
                           android:layout_margin="10dp"
                           android:layout_width="match_parent"
                           android:layout_height="1dp"
                           android:background="@color/login_background"
                           />
                       <LinearLayout 
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:gravity="center_vertical"
                            android:orientation="horizontal" 
                            android:background="@drawable/inputbox_bg">
                            <TextView 
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                android:textColor="@color/common_top_bar_blue"
                                android:text="设置密码"    
                                />  
                            <EditText 
                                 android:id="@+id/register_passward"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="6"
                                android:inputType="textPassword"
                                android:background="@null"                            
                                android:textSize="15.0sp"
                                android:hint="请输入至少6位密码"/>                                                                     
                        </LinearLayout>
                      <ImageView
                       android:layout_margin="10dp" 
                       android:layout_width="match_parent"
                       android:layout_height="1dp"
                       android:background="@color/login_background"
                       />
                      <LinearLayout 
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center_vertical"
                        android:orientation="horizontal" 
                        android:background="@drawable/inputbox_bg">
                        <TextView 
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:textColor="@color/common_top_bar_blue"
                            android:text="验证码"    
                            />  
                        <EditText 
                            android:id="@+id/register_code"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="2"
                            android:inputType="number"
                            android:background="@null"                            
                            android:textSize="15.0sp"
                            android:textColor="@color/login_background"
                            android:text="0"/>    
                        <Button
                            android:id="@+id/get_code"
                            style="@style/style_common_btn"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="2"
                            android:layout_margin="5dp"
                            android:background="@drawable/selector_common_btn"
                            android:text="获取验证码" />                                                                        
                        </LinearLayout>                                    
                </LinearLayout>    
               <Button
                   android:id="@+id/confirm_button"
                   style="@style/style_common_btn"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:layout_margin="10dp"
                   android:background="@drawable/selector_common_btn2"
                   android:text="确定" />                                              
        </LinearLayout>
                                 
        </LinearLayout>
        
                  
           
    </ViewFlipper>


</LinearLayout>

新建一个类实现登录注册的逻辑

package com.example.tesf;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.ViewFlipper;

public class RegiserLogin extends Fragment{
    
    private ImageButton ib_back;
    private ImageButton ib_menu;
    private TextView regster_text;//
    private TextView ivTitleName;
    private TextView ivTextViewRigh;
    private ViewFlipper vf;    
    private Button confirm_button;
    private Button load_btn;    
    private EditText login_number;
    private EditText login_passward;
    private EditText register_number;
    private EditText register_passward;
    private EditText register_code;
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
          View rootView = inflater.inflate(R.layout.fragment_main, container, false);
          initView(rootView);
          return rootView;
    }
    private void initView(View view){
        vf = (ViewFlipper) view.findViewById(R.id.mainFlipper);
        ib_menu = (ImageButton) view.findViewById(R.id.ivTitleBtnLeft2);
        ib_back = (ImageButton) view.findViewById(R.id.ivTitleBtnLeft1);
        
        regster_text = (TextView) view.findViewById(R.id.regster_text);
        ivTitleName = (TextView) view.findViewById(R.id.ivTitleName);
        
        confirm_button = (Button) view.findViewById(R.id.confirm_button);
        load_btn = (Button) view.findViewById(R.id.loadBtn);
        
        login_number = (EditText) view.findViewById(R.id.login_number);
        login_passward = (EditText) view.findViewById(R.id.login_passward);
        register_number = (EditText) view.findViewById(R.id.register_number);
        register_passward = (EditText) view.findViewById(R.id.register_passward);
        register_code = (EditText) view.findViewById(R.id.register_code);
        
        
        ib_back.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {                
//                finish();
            }
        });

       regster_text.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
            ib_menu.setVisibility(View.VISIBLE);
            ivTitleName.setText("注册新账号");
            vf.showNext();
            ib_back.setVisibility(View.GONE);
        }
       });
      
      ib_menu.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
            ib_back.setVisibility(View.VISIBLE);
            ivTitleName.setText("登录");
            vf.showPrevious();
            ib_menu.setVisibility(View.GONE);
            
        }
      });
        
        
    }

}

实现登录注册功能只需要在向导生成的MainActivity里稍加改动就行

if (savedInstanceState == null) {
            getFragmentManager().beginTransaction()
                    .add(R.id.container, new RegiserLogin())
                    .commit();
}

其实在学习Android的过程中都可以仿照这种模式，在向导生成代码的基础上，自己创建extends Fragment的类，再建一个该类需要用的布局文件。

这样所有的demo都可以在一个工程下完成啦。