目錄
- Fragment簡介
- Fragment靜態使用
- 1.創建一個Fragment
- 2.在activity中加入Fragment
- Fragment的邏輯操作
- 示例一：入門
- 示例二：實作點擊按鈕跳轉
- 示例三：模擬QQ底部界面（實作了點擊圖片和文字顏色變換）
- RecyclerView和Fragment整合
Fragment簡介
Fragment可以說是輕量級的Activity，是Android3.0新增的概念，
因為平板的螢屏比手機大很多，所以一開始的平板和手機的UI設計是區分開來的，難道無法做到一個App可以同時適應手機和平板么，而Fragment的出現就是為了解決這樣的問題，
QQ,微信中點擊訊息，聯系人等等是典型的案例，在等下的示例中會拿這些進行說說明，
Fragment靜態使用
1.創建一個Fragment
因為Fragment是activity的一部分，所以對比activity，Fragment只會生成java檔案和對應的xml布局檔案，不會在manifests里生成注冊的代碼，
在創建好的這個BlankFragment.java中有些方法暫時用不到，可以洗掉
改約束可以方便操作
2.在activity中加入Fragment
接下來就可以開始我們的Fragment的樣例使用了
Fragment的邏輯操作
示例一：入門
實作了Fragment中的跳轉activity，設定文本值
先將UI設計好
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<fragment
android:id="@+id/fragment"
android:name="com.hnucm.android04_16.BlankFragment"
android:layout_width="346dp"
android:layout_height="282dp"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="4dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_blank.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".BlankFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="@string/hello_blank_fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="53dp"
android:layout_marginLeft="53dp"
android:layout_marginTop="107dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
拿到Fragment布局檔案中組件的參考，并對該組件進行操作，有兩種方法，對應于本案例的按鈕和文本控制元件，
方法一：使用onCreateView方法
方法二：重寫一個onActivityCreated()方法，然后在onActivityCreated()方法里面通過getActivity()方法拿到控制元件的參考，
BlankFragment.java
package com.hnucm.android04_16;
import android.content.Intent;
import android.os.Bundle;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
public class BlankFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// 拿到參考
View view=inflater.inflate(R.layout.fragment_blank, container, false);
Button button=view.findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v) {
// 跳轉activity
// Context -Fragment里傳Context 引數統一用 getActivity()
Intent intent=new Intent(getActivity(),MainActivity2.class);
startActivity(intent);
}
});
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
TextView textView=getActivity().findViewById(R.id.textView);
textView.setText("湖南中醫藥大學");
}
}
示例二：實作點擊按鈕跳轉
activity_xml.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- fragment 換成布局 占據一段位置-->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/fragment"
android:layout_width="300dp"
android:layout_height="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="訊息"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="聯系人"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button2" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="動態"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button3" />
</androidx.constraintlayout.widget.ConstraintLayout>
在上一個案例中activity_xml.xml中的Fragment換成一個布局，占據一段位置，為之后跳轉做準備
創建了三個Fragment用來跳轉
三個Fragment中的控制元件分別是
在MainActivity.java中，實體化三個Fragment，在按鈕點擊事件中，實作點擊事件，
點擊后更換之前替換的那個布局
getSupportFragmentManager().beginTransaction().replace(R.id.fragment,messageFragment).commit();//加載messageFragment
MainActivity.java
package com.hnucm.android04_16;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
MessageFragment messageFragment=new MessageFragment();
DongtaiFragment dongtaiFragment=new DongtaiFragment();
ContactFragment contactFragment=new ContactFragment();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button1=findViewById(R.id.button2);
button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getSupportFragmentManager().beginTransaction().replace(R.id.fragment,messageFragment).commit();//加載messageFragment
}
});
Button button2=findViewById(R.id.button3);
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getSupportFragmentManager().beginTransaction().replace(R.id.fragment,contactFragment).commit();//加載contactFragment
}
});
Button button3=findViewById(R.id.button4);
button3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getSupportFragmentManager().beginTransaction().replace(R.id.fragment,dongtaiFragment).commit();//加載dongtaiFragment
}
});
}
}
示例三：模擬QQ底部界面（實作了點擊圖片和文字顏色變換）
這個案例的跳轉功能還是和上一個案例基本一致
因為要求圖片下面有文字，所以我們對每一個狀態欄都使用的是constraintlayout約束布局，可見代碼
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- fragment 換成布局 占據一段位置-->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/fragment"
android:layout_width="300dp"
android:layout_height="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout8"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintEnd_toStartOf="@+id/constraintLayout7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/message" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="訊息"
android:textColor="@drawable/text_color"
app:layout_constraintEnd_toEndOf="@+id/imageView"
app:layout_constraintStart_toStartOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout7"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/constraintLayout9"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/constraintLayout8">
<ImageView
android:id="@+id/imageView2"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/contact" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="聯系人"
android:textColor="@drawable/text_color"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/constraintLayout9"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/constraintLayout7">
<ImageView
android:id="@+id/imageView3"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/dongtai" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="動態"
android:textColor="@drawable/text_color"
app:layout_constraintEnd_toEndOf="@+id/imageView3"
app:layout_constraintStart_toStartOf="@+id/imageView3"
app:layout_constraintTop_toBottomOf="@+id/imageView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
如何實作點擊下方每個選項使得其變成被選中狀態呢？
先準備圖片
首先我們要為沒每一個狀態欄準備兩張圖片，分別是未被選中的灰色，和被選中的藍色
這里就不貼圖了，貼了三張圖片設定的代碼，
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/contact_select" android:state_selected="true" />
<item android:drawable="@drawable/contact_unselect" android:state_selected="false" />
</selector>
然后對activity.xml布局中的圖片組件也要進行背景設定
同樣，文字也需要被選中變成藍色
我們在drawable中添加了text_color.xml組態檔，對字體選中未選中的顏色進行了設定
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#618CF1" android:state_selected="true"/>
<item android:color="#B0B0B0" android:state_selected="false"/>
</selector>
然后對activity.xml布局也要進行設定字體顏色
RecyclerView和Fragment整合
整合這兩個組件的程序中，要注意將Recycle放在對應的Fragment中，不要直接放進Activity，
在完成本周作業的時候，我做的是模擬微信界面，
完成效果演示如下：
專案結構：
這一部分先不貼了，作業批改完之后再補上，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/277697.html
標籤：其他