1. Uso simples de fragmentos
Adicione dois fragmentos a uma atividade e deixe que os dois fragmentos dividam o espaço da atividade igualmente.
Passo 1: Primeiro crie left_fragment.xml no layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="button"/>
</LinearLayout>
e fragmento_direito:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#00ff00"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="20sp"
android:text="文本"></TextView>
</LinearLayout>
Etapa 2: criar as classes leftFragment.class e rightFragment.class
public class LeftFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
View view=inflater.inflate(R.layout.left_fragment,container,false);
return view;
}
}
e:
public class RightFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.left_fragment,container,false);
return view;
}
}
Etapa 3: Modifique o arquivo mainActivity.xml e importe-o pelo nome
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/left_fragment"
android:name="com.example.fragmenttest.LeftFragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
<fragment
android:id="@+id/right_fragment"
android:name="com.example.fragmenttest.RightFragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</LinearLayout>
O que ele consegue:
não parece muito diferente dos componentes do front-end.
Em segundo lugar, adicione fragmentos dinamicamente
1. A primeira etapa: Criar another_right_fragment.xml da instância do fragmento a ser adicionada:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#ffff00"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="另一个碎片"
android:textSize="20sp"/>
</LinearLayout>
2. A segunda etapa: modificar mainActivity.xml
É para aninhar o layout FrameLayout sob o layout LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/left_fragment"
android:name="com.example.fragmenttest.LeftFragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
<FrameLayout
android:id="@+id/right_layout"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
/>
</LinearLayout>
3. Modifique na atividade principal mainActivity.class
Ou seja, por padrão, um fragmento é renderizado primeiro no fragmento à direita e, em seguida, os fragmentos no contêiner FrameLayout são alternados clicando no botão.
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//右侧活动初始展示的碎片
replaceFragment(new RightFragment());
//点击左侧的按钮
Button button =(Button) findViewById(R.id.button);
button.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch(view.getId()){
case R.id.button:
replaceFragment(new AnotherRightFragment());
break;
default:
break;
}
}
private void replaceFragment(Fragment fragment) {
//1,创建新的碎片实例new AnotherRightFragment()
//2,获取FragmentManager
FragmentManager fragmentManager =getSupportFragmentManager();
//3,通过beginTransaction()开启一个事务
FragmentTransaction transaction=fragmentManager.beginTransaction();
//4，向容器内添加事务，（容器的id,待添加的碎片实例）
transaction.replace(R.id.right_layout,fragment);
//提交事务才能完成
transaction.commit();
}
}
4. Simule a pilha de retorno em fragmentos
O efeito que desejo obter é que, quando o botão Voltar é clicado, o fragmento pode retornar em vez de retornar diretamente à pilha ativa anterior.
Modifique o arquivo MainActivity.class:
private void replaceFragment(Fragment fragment) {
//1,创建新的碎片实例new AnotherRightFragment()
//2,获取FragmentManager
FragmentManager fragmentManager =getSupportFragmentManager();
//3,通过beginTransaction()开启一个事务
FragmentTransaction transaction=fragmentManager.beginTransaction();
//4，向容器内添加事务，（容器的id,待添加的碎片实例）
transaction.replace(R.id.right_layout,fragment);
//将事务添加到返回栈中,一般传入null就行，这样碎片中的活动就会和已经加入返回栈中一样
transaction.addToBackStack(null);
//提交事务才能完成
transaction.commit();
}
Dessa forma, é como se as atividades do fragmento estivessem todas na pilha de retorno.
5. Comunicação entre fragmentos e atividades
Embora os fragmentos estejam aninhados em Activities, eles não são tão intimamente relacionados. Você pode ver que fragmentos e atividades existem em uma classe separada e não há uma maneira óbvia de se comunicar diretamente entre eles.
Então, se eu quiser chamar o método no fragmento na atividade agora, ou chamar o método da atividade no fragmento. Como deve ser alcançado?
FragmentManager fornece um método semelhante ao findViewById(), que é usado especialmente para obter instâncias de fragmentos de arquivos de layout. O código é o seguinte:
RightFragment rightFragment = (RightFragment) getFragmentManager().findFragmentById(R.id.right fragment);
Chame o método findFragmentById() de FragmentManager, você pode obter a instância do fragmento correspondente na atividade e então você pode facilmente chamar o método no fragmento.
Como obter a instância da atividade no fragmento?
MainActivity activity = (MainActivity) getActivity();
Três, o ciclo de vida dos fragmentos
Quarto, a técnica de carregar dinamicamente o layout
1. Use qualificadores
O uso de qualificadores permite que o programa determine o ambiente no qual o programa atual está sendo executado, usando assim o modo de página única ou o modo de página dupla.
Por exemplo: Mas quando nosso celular precisa exibir uma página e o tablet widescreen precisa exibir dois blocos de página, pode ser:
primeiro escreva o layout normal do modo de página única em layout/activity_main.xml.
Em seguida, crie uma nova pasta em res: layout-large e crie um novo arquivo activity_main.xml com o mesmo nome. Um layout de tela dupla para um tablet de escrita.
Depois que o programa for executado, ele julgará o ambiente, lerá o código em layout-large quando for tablet, caso contrário, lerá o código em layout.
2. Use o qualificador de largura mínima
Se quisermos controlar as consultas de mídia exatamente.
Crie uma nova pasta layout-sw660dp em res e, em seguida, crie um novo arquivo activity_main.xml com o mesmo nome para gravar o layout. Desta forma, quando o programa for executado em um dispositivo com largura maior que 600dp, será carregado o layout layout-sw600dp/activity_main, caso contrário, será carregado o layout layout/activity_main padrão.
Cinco, a melhor aplicação de fragmentos
Se, como acima, um conjunto de códigos for escrito para cada dispositivo, a carga de trabalho será enorme e a manutenção subsequente será difícil.
Etapa 1: introduzir o recycleview no build.gradle
dependencies {
implementation 'androidx.recyclerview:recyclerview:1.1.0'
}
Etapa 2: preparar uma classe de entidade de notícias Notícias:
public class News {
public String title;
public String content;
public String getTitle(){
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
Etapa 3: crie um novo arquivo de layout news_content_frag.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/visibility_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:textSize="20sp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"/>
<TextView
android:id="@+id/news_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="15dp"
android:textSize="18sp"/>
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="#000"/>
</RelativeLayout>
O layout do conteúdo da notícia é dividido principalmente em duas partes, a cabeça mostra o título da notícia e o corpo mostra o conteúdo da notícia, separados por uma linha fina no meio.
Etapa 4: crie uma nova classe NewsContentFragment:
package com.example.fragmenttest;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
public class NewsContentFragment extends Fragment {
private View view;
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//加载新闻布局
view = inflater.inflate(R.layout.news_content_frag, container, false);
return view;
}
/**
* 将新闻标题和新闻内容显示在界面上 用来刷新新闻详情
*/
public void refresh(String newsTitle, String newsContent) {
View visibilityLayout = view.findViewById(R.id.visibility_layout);
visibilityLayout.setVisibility(View.VISIBLE);//把visibilityLayout设置成可见
TextView newsTitleText = (TextView) view.findViewById(R.id.news_title);//获取新闻标题控件
TextView newsContentText = (TextView) view.findViewById(R.id.news_content);//获取新闻正文控件
newsTitleText.setText(newsTitle);//刷新新闻标题
newsContentText.setText(newsContent);//刷新新闻内容
}
}
Primeiro, o layout do frag do conteúdo de notícias que acabamos de criar é carregado no método onCreateView(), o que não é nada para explicar. Em seguida, é fornecido um método refresh(), que é usado para exibir o título e o conteúdo da notícia na interface. Pode-se observar que os controles de título e conteúdo da notícia são obtidos respectivamente através do método findViewBvId) e, a seguir, são definidos os parâmetros passados pelo método.
Dessa forma, o arquivo de classe de fragmento e o layout xml do conteúdo de notícias são criados.
Mas todos eles são usados no modo de página dupla. Se você quiser usá-lo no modo de página única. Mais uma atividade precisa ser criada.
Etapa 5: criar um novo arquivo NewsContentActivity
O arquivo news_content.xml correspondente será automaticamente criado e modificado para:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<fragment
android:id="@+id/news_content_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.fragmenttest.NewsContentFragment"/>
</LinearLayout>
A classe NewsContentFragment criada acima é introduzida diretamente aqui, o que equivale a introduzir o arquivo de layout news_content_frag.xml.
Em seguida, modifique o código em newsContentActivity:
public class NewsContentActivity extends AppCompatActivity {
/**
* 构建Intent，传递所需数据
*/
public static void actionStart(Context context, String newsTitle, String newsContent){
Intent intent = new Intent(context,NewsContentActivity.class);
intent.putExtra("news_title",newsTitle);
intent.putExtra("news_content",newsContent);
context.startActivity(intent);
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.news_content);
//获取传入的新闻标题、新闻内容
String newsTitle = getIntent().getStringExtra("news_title");
String newsContent = getIntent().getStringExtra("news_content");
//获取NewsContentFragment 实例
NewsContentFragment newsContentFragment = (NewsContentFragment) getSupportFragmentManager().findFragmentById(R.id.news_content_fragment);
//刷新NewsContentFragment 显示数据
newsContentFragment.refresh(newsTitle,newsContent);
}
}
No método onCreate(), obtenha o título e o conteúdo das notícias recebidas por meio do Intent
Em seguida, chame o método findFragmentById() de FragmentManager para obter uma instância de NewsContentFragment
Em seguida, chame seu método refresh () e passe o título e o conteúdo da notícia para exibir os dados
Passo 6: Crie o layout news_title_frag.xm da lista de notícias
Em seguida, precisamos criar o layout news_title_frag.xml que exibe a lista de notícias, conforme a seguir:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--新闻列表-->
<android.support.v7.widget.RecyclerView
android:id="@+id/news_title_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Etapa 7: crie um novo news_item.xml como o layout dos subitens RecyclerView acima
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/news_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:textSize="18sp"
android:padding="10dp"/>
O layout do subitem é apenas uma
lista de notícias TextView e o layout do subitem é criado e, em seguida, é necessário um local para exibir a lista de notícias. Aqui, um novo
NewsTitleFragment é criado como um fragmento para exibir a lista de notícias:
/**
* 新闻列表fragment
*/
public class NewsTitleFragment extends Fragment{
private boolean isTowPane;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.news_content_frag, container, false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if (getActivity().findViewById(R.id.news_content_layout)!= null){
// 可以找到 news_content_layout 布局时，为双页模式
isTowPane = true;
}else {
// 找不到 news_content_layout 布局时，为单页模式
isTowPane = false;
}
}
}
Para realizar o método onActivityCreated() mencionado acima para julgar se o modo atual de página dupla ou página única
é o próximo, crie uma classe interna NewsAdapter em NewsTitleFragemt como um adaptador para RecyclerView
da seguinte maneira:
public class NewsTitleFragment extends Fragment{
private boolean isTowPane;
. . .
/**
* RecyclerViews适配器
* */
class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> {
private List<News> mNewsList;
class ViewHolder extends RecyclerView.ViewHolder {
TextView newsTitleText;
public ViewHolder(View view) {
super(view);
newsTitleText = (TextView) view.findViewById(R.id.news_title);//新闻标题
}
}
public NewsAdapter(List<News> newsList) {
mNewsList = newsList;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//加载布局
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);
//每个Item的点击事件
final ViewHolder holder = new ViewHolder(view);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
News news = mNewsList.get(holder.getAdapterPosition());
//如果是双页模式，则刷新NewsContentActivity中的数据
if (isTwoPane) {
NewsContentFragment newsContentFragment = (NewsContentFragment) getFragmentManager().findFragmentById(R.id.news_content_fragment);
newsContentFragment.refresh(news.getTitle(), news.getContent());
} else {
//如果是单页模式，则直接启动NewsContentActivity
NewsContentActivity.actionStart(getActivity(), news.getTitle(), news.getContent());
}
}
});
return holder;
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
News news = mNewsList.get(position);
holder.newsTitleText.setText(news.getTitle());
}
@Override
public int getItemCount() {
return mNewsList.size();
}
}
Deve-se observar que o adaptador é escrito como uma classe interna aqui para acessar diretamente as variáveis de NewsTitleFragment.
Por exemplo: isTowPane
agora tem a última etapa de acabamento do trabalho, que é preencher o RecyclerView com dados
. Modifique o código em NewsTitleFragment como segue:
public class NewsTitleFragment extends Fragment{
. . .
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.news_title_frag, container, false);
//RecyclerView实例
RecyclerView newsTitleRecyclerView = (RecyclerView) view.findViewById(R.id.news_title_recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
newsTitleRecyclerView.setLayoutManager(layoutManager);//指定布局为线性布局
NewsAdapter adapter = new NewsAdapter(getNews());//把模拟新闻数据传入到NewsAdapter构造函数中
newsTitleRecyclerView.setAdapter(adapter);//完成适配器设置
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
if (getActivity().findViewById(R.id.news_content_layout) != null) {
// 可以找到news_content_layout布局时，为双页模式
isTwoPane = true;
} else {
// 找不到news_content_layout布局时，为单页模式
isTwoPane = false;
}
}
/**
* 初始化50条模拟新闻数据
* @return
*/
private List<News> getNews() {
//创建集合
List<News> newsList = new ArrayList<>();
//实例化数据
for (int i = 1; i <= 50; i++) {
News news = new News();
news.setTitle("标题" + i);
news.setContent(getRandomLengthContent("东营职业学院电子信息与传媒学院" + i + ". "));
newsList.add(news);
}
return newsList;
}
/**
* 随机生成不同长度的新闻内容
* @param content
* @return
*/
private String getRandomLengthContent(String content) {
Random random = new Random();
int length = random.nextInt(20) + 1;
StringBuilder builder = new StringBuilder();
for (int i = 0; i < length; i++) {
builder.append(content);
}
return builder.toString();
}
. . .
}
O seguinte é o modo de página dupla.
Em primeiro lugar, aqueles que leram as primeiras linhas de código nas primeiras páginas devem saber que a nova pasta layout-sw600dp em res selecionará automaticamente os arquivos nesta pasta quando a tela a resolução é maior que 600. Crie um novo arquivo activity_main na pasta.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<fragment
android:id="@+id/news_title_fragment"
android:name="com.yiyajing.mypremission.fragment.NewsTitleFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<FrameLayout
android:id="@+id/news_content_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3">
<fragment
android:id="@+id/news_content_fragment"
android:name="com.yiyajing.mypremission.fragment.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>
Pode-se ver que no modo de página dupla, introduzimos dois fragmentos ao mesmo tempo e colocamos os fragmentos de conteúdo de notícias em um layout FrameLayout, e o id desse layout é news_content_layout. Portanto, o modo de página dupla pode será encontrado se este id puder ser encontrado. Caso contrário, é o modo de página única. No caso do modo de página dupla, o sistema selecionará automaticamente este layout.