Android之Fragment应用——一个简易版的新闻应用

内容：
1、准备工作
2、新建一个新闻的实体类News
3、新建布局文件news_content_frag.xml，作为新闻内容的布局
4、NewsContentFragment类，继承自Fragment
5、新建NewsContentActivity活动，将布局名指定为
news_content.xml
6、创建一个实现新闻列表的布局news_title_frag.xml
7、新建news_item.xml，作为RecyclerView子项的布局
8、新建展示新闻列表的碎片NewsTitleFragment
9、在NewsTitleFragment中新建一个内部类NewsAdapter来作为RecyclerView的适配器
10、修改NewsTitleFragment中的代码

一、准备工作
在app/build.gradle的dependencies中，加入以下一行代码

implementation 'androidx.recyclerview:recyclerview:1.1.0'

二、新建一个新闻的实体类News

package com.example.fragmenttest;

public class News {

    private String title;//新闻标题

    private 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;
    }
}

三、新建布局文件news_content_frag.xml，作为双页模式下新闻内容部分的布局

在xml文件中设置android:visibility="invisible"
故在应用时，应将该设置修改为visible

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <!--新闻内容的布局分为两部分    -->
    <LinearLayout
        android:id="@+id/visiblity_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="invisible">

        <!-- 1、头部部分：显示新闻标题  -->
        <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="10dp"
            android:background="#000"/>


        <!-- 2、正文部分：显示新闻内容        -->
        <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="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentLeft="true"
        android:background="#000"/>



</RelativeLayout>

四、创建两种模式下共用新闻内容的Fragment：NewsContentFragment类，继承自Fragment

将invisible修改为visible状态：
visibilityLayout.setVisibility(View.VISIBLE);

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.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

/**
 * NewsContentFragment类，继承自Fragment
 */
public class NewsContentFragment extends Fragment{

    private View view;

    /**
     * 
     * 加载刚创建好的news_content_frag布局
     * 
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

		/**
         * resource : 它是要解析的XML文件的id号(必填)
         * root :   如果传入不为空, attachToRoot也为true, 就把XML解析后的view加入root子控件, 然后返回这个root.
         *          否则, 就返回一个解析之后的XML生成的view.
         * attachToRoot : 决定是否让root成为返回值的父控件
         *
         */
        view=inflater.inflate(R.layout.news_content_frag,container,false);
        return view;

    }


    /**
     * 
     * 将新闻标题和新闻内容显示在界面上
     * 
     * @param newsTitle
     * @param newsContent
     */
    public void refresh(String newsTitle,String newsContent){
        
        View visibilityLayout=view.findViewById(R.id.visiblity_layout);
        visibilityLayout.setVisibility(View.VISIBLE);

        //分别获取到新闻标题和新闻内容的控件
        TextView newsTilteText=(TextView)view.findViewById(R.id.news_title);
        TextView newsContentText=(TextView)view.findViewById(R.id.news_content);

		//刷新新闻的标题和内容
        newsTilteText.setText(newsTitle);
        newsContentText.setText(newsContent);
    }
}

五、新建NewsContentActivity活动：单页模式下引用NewsContentFragment的Activity；
将布局名指定为news_content.xml：单页模式下新闻内容部分的布局

1、news_content.xml

充分发挥代码的复用性，在布局中直接引入NewsContentFragment
这样也相当于把news_content_frag布局的内容自动加了进来

android:name="com.example.fragmenttest.NewsContentFragment"

	<?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"
    >
    <fragment
        android:id="@+id/news_content_fragment"
        android:name="com.example.fragmenttest.NewsContentFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</LinearLayout>

2、NewsContentActivity

package com.example.fragmenttest;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

/**
 * NewsContentActivity，继承自AppCompatActivity
 */
public class NewsContentActivity extends AppCompatActivity {


    /**
     * 启动活动的最佳方法：无须阅读其他代码，就可以非常清晰的指导启动NewsContentActivity需要传递拿些数据
     * @param context
     * @param newsTitle
     * @param newsContent
     */
    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);
    }

    /**
     *
     * 通过Intent获取到了传入的新闻标题和新闻内容，然后调用FragmentManager的findFragmentById()方法
     * 得到 NewsContentFragment的实例，接着调用 NewsContentFragment 的 refresh()方法
     *
     * @param savedInstanceState
     */
    @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)
                getSupportFragmentManager().findFragmentById(R.id.news_content_fragment);


        //将新闻标题和新闻内容显示在界面上
        newsContentFragment.refresh(newsTitle,newsContent);
    }
}

六、创建布局news_title_frag.xml：两种模式下共用新闻标题列表的布局

在这里用到了RecyclerView，那么就必定少不了子项的布局
之后会新建news_item.xml作为其子项布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/news_title_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

七、新建布局news_item.xml：新闻标题列表的子布局（作为RecyclerView子项的布局）

设定当文本内容超出空间宽度时，文本的缩略方式，这里指定成end，表示在尾部进行缩略
android:ellipsize="end"

设置这个TextView只能单行显示
android:singleLine="true"

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp"
    >

</TextView>

八、新建NewsTitleFragment：两种模式下新闻标题部分的碎片

package com.example.fragmenttest;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class NewsTitleFragment extends Fragment {


    private boolean isTwoPage;

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

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

        if(getActivity().findViewById(R.id.news_content_layout)!=null){
            isTwoPage = true;
        }
        else{
            isTwoPage=false;
        }
    }
}

通过在活动中能否找到一个id为news_content_layout的View来判断当前是双页模式还是单页模式

因此，需要修改activity_main.xml的代码：单页模式下，只加载一个新闻标题的碎片布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/news_title_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <fragment
        android:id="@+id/news_title_fragment"
        android:name="com.example.fragmenttest.NewsTitleFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</FrameLayout>

通过限定符的方式系统区分运行的大屏幕还是小屏幕，新建适配大屏幕的布局文件夹layout-sw600dp，在其下创建activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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/news_title_fragment"
        android:name="com.example.fragmenttest.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.example.fragmenttest.NewsContentFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
        
    </FrameLayout>
    

</LinearLayout>

九、在NewsTitleFragment中新建一个内部类NewsAdapter来作为RecyclerView的适配器

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.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class NewsTitleFragment extends Fragment {


    private boolean isTwoPage;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=LayoutInflater.from(getContext()).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){
            isTwoPage = true;
        }
        else{
            isTwoPage=false;
        }
    }

    class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{

        private  List<News> mNewsList;

        public class ViewHolder extends RecyclerView.ViewHolder{

            TextView newsTitleText;


            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                newsTitleText=(TextView) itemView.findViewById(R.id.news_title);
            }
        }
        
        public NewsAdapter(List<News> newsList){
            mNewsList = newsList;
        }

        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            
            
            View view=LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.news_item,parent,false);
            
            final ViewHolder holder=new ViewHolder(view);
            
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    News news=mNewsList.get(holder.getAdapterPosition());
                    
                    if(isTwoPage){
                        //如果是双页模式，则刷新NewsContentFragment的内容
                        NewsContentFragment newsContentFragment=
                                (NewsContentFragment)getFragmentManager().findFragmentById(R.id.news_content_fragment);
                        newsContentFragment.refresh(news.getTitle(),news.getContent());
                        news.getContent();
                    }
                    else{
                        //如果是单页模式，则直接启动NewsContentActivity
                        NewsContentActivity.actionStart(getActivity(),news.getTitle(),news.getContent());
                    }
                }
            });
            
            return holder;
        }

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            News news=mNewsList.get(position);
            holder.newsTitleText.setText(news.getTitle());
        }

        @Override
        public int getItemCount() {
            return mNewsList.size();
        }


    }
}

十、修改NewsTitleFragment中的代码

1、修改onCreateView

 @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=LayoutInflater.from(getContext()).inflate(R.layout.news_content_frag,container,
                false);

        RecyclerView newsTitleRecyclerView=(RecyclerView)view.findViewById(R.id.news_title_recycler_view);

        LinearLayoutManager layoutManager=new LinearLayoutManager(getActivity());

        newsTitleRecyclerView.setLayoutManager(layoutManager);

        NewsAdapter adapter=new NewsAdapter(getNews());

        newsTitleRecyclerView.setAdapter(adapter);

        return view;
    }

2、新增getNews

private List<News> getNews() {

        List<News> newsList=new ArrayList<>();

        for (int i = 0; i <=50 ; i++) {
            News news=new News();
            news.setTitle("This is news title "+i);
            news.setContent(getRandomLengthContent("This is news content "+i+"."));
            newsList.add(news);
        }
        return newsList;
    }

3、新增getRandomLengthContent

 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();
    }

十一、主活动MainActivity.java

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

十二、运行效果

1、在手机上
在这里插入图片描述
[文件]

2、在平板上
在这里插入图片描述

生来如风

发布了34 篇原创文章 · 获赞 5 · 访问量 7336

私信关注

Android之Fragment应用——一个简易版的新闻应用

猜你喜欢