Write a practical program compatible with mobile phones and tablets here.
First add dependencies in app/builtd.gradle:
dependencies {
implementation 'androidx.core:core-ktx:1.3.2'
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'com.google.android.material:material:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
implementation 'androidx.recyclerview:recyclerview:1.2.0'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
}Create a new News class:
class News(val title: String, val content: String)Create a new layout file news_content_frag.xml:
<?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/contentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:id="@+id/newsTitle"
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/newsContent"
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>The above layout is mainly divided into two parts, the head part displays the news title, and the body part displays the news content, separated by a thin horizontal line in the middle. Then use a thin vertical line to separate the news content on the left and right sides in double page mode. The thin line is achieved through View, and setting the width, height and background color.
And in the above content, the layout of the news content is invisible, because in the double-page mode, if no news in the news list is selected, the layout of the news content should not be displayed.
Then create a new NewsContentFragment class:
class NewsContentFragment:Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.news_content_frag, container, false)
}
fun refresh(title: String, content: String) {
contentLayout.visibility = View.VISIBLE
newsTitle.text = title
newsContent.text = content
}
}The layout just created is loaded in the onCreateView method above, and then the refresh method is provided to display the title and content, but the layout should be set to be visible before displaying.
The above is the layout in double-page mode, and if you want to use it in single-page mode, you need to create another NewsContentActivity, the layout name is activity_news_content, and then modify the layout code:
<?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">
<fragment
android:id="@+id/newsContentFrag"
android:name="com.example.fragmentbestpractice.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>Also modify the code in NewsContentActivity:
class NewsContentActivity : AppCompatActivity() {
companion object {
fun actionStart(context: Context, title: String, content:String) {
val intent = Intent(context, NewsContentActivity::class.java).apply {
putExtra("news_title", title)
putExtra("news_content", content)
}
context.startActivity(intent)
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_news_content)
val title = intent.getStringExtra("news_title")
val content = intent.getStringExtra("news_content")
if (title != null && content != null) {
val fragment = newsContentFrag as NewsContentFragment
fragment.refresh(title, content)
}
}
}In the above code, the onCreate method obtains the incoming title and content through the Intent, and then calls the refresh method to pass in the title and content to display its content.
Then create the news_title_frag.xml layout to display the list on the right:
<?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/newsTitleRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>Since it is RecyclerView, you need to create a new news_item layout as the layout of RecyclerView subitems:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/newsTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textSize="18sp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"/>
There is only one TextView in the above layout, and android:ellipsize is used to set the abbreviation method of the text when the text content exceeds the width of the control. Here, end is specified to abbreviate at the end.
Then create a new NewsTitleFragment as the Fragment to display the list:
class NewsTitleFragment:Fragment() {
private var isTwoPane = false
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.news_title_frag, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
isTwoPane = activity?.findViewById<View>(R.id.newsContentLayout) != null
}
}But obviously, there is no id of newsContentLayout in the previous code, and this id is related to the judgment of the double-page mode, so it is necessary to make the View with this id appear only in the double-page mode.
The qualifiers mentioned earlier are needed here. First modify the code in activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/newsTitleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/newsTitleFrag"
android:name="com.example.fragmentbestpractice.NewsTitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>The above code will only load the Fragment of the news headline in single page mode.
Then create a new layout-sw600dp folder, and create a new activity_main.xml under this folder:
<?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/newsTitleFrag"
android:name="com.example.fragmentbestpractice.NewsTitleFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<FrameLayout
android:id="@+id/newsContentLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" >
<fragment
android:id="@+id/newsContentFrag"
android:name="com.example.fragmentbestpractice.NewsContentFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
It can be seen that there are two Fragments in the double-page mode, and the news content is placed under a FrageLayout layout, and the layout id is newsContentLayout, so the double-page mode can be found if the id is found.
After that, display the list through RecyclerView in NewsTitleFragment, and also modify the NewsTitleFragment code:
class NewsTitleFragment:Fragment() {
private var isTwoPane = false
inner class NewsAdapter(val newsList: List<News>):RecyclerView.Adapter<NewsAdapter.ViewHolder>() {
inner class ViewHolder(view: View):RecyclerView.ViewHolder(view) {
val newsTitle:TextView = view.findViewById(R.id.newsTitle)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NewsAdapter.ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.news_item, parent, false)
val holder = ViewHolder(view)
holder.itemView.setOnClickListener {
val news = newsList[holder.absoluteAdapterPosition]
if(isTwoPane) {
val fragment = newsContentFrag as NewsContentFragment
fragment.refresh(news.title, news.content)
} else {
NewsContentActivity.actionStart(parent.context, news.title, news.content)
}
}
return holder
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val news = newsList[position]
holder.newsTitle.text = news.title
}
override fun getItemCount() = newsList.size
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.news_title_frag, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
isTwoPane = activity?.findViewById<View>(R.id.newsContentLayout) != null
}
}The above only creates an adapter for RecyclerView, but here the adapter is written in the form of an inner class so that the variables in NewsTitleFragment can be directly accessed.
In the click event registration of onCreateViewHolder, first obtain the News instance, and then determine the double-page or single-page mode. If it is a single-page mode, start a new Activity to display the news content, and if it is a double-page mode, update NewsContentFragment. data.
Finally, fill data into RecyclerView and modify NewsTitleFragment:
class NewsTitleFragment:Fragment() {
private var isTwoPane = false
inner class NewsAdapter(val newsList: List<News>):RecyclerView.Adapter<NewsAdapter.ViewHolder>() {
inner class ViewHolder(view: View):RecyclerView.ViewHolder(view) {
val newsTitle:TextView = view.findViewById(R.id.newsTitle)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NewsAdapter.ViewHolder {
val view = LayoutInflater.from(parent.context).inflate(R.layout.news_item, parent, false)
val holder = ViewHolder(view)
holder.itemView.setOnClickListener {
val news = newsList[holder.absoluteAdapterPosition]
if(isTwoPane) {
val fragment = newsContentFrag as NewsContentFragment
fragment.refresh(news.title, news.content)
} else {
NewsContentActivity.actionStart(parent.context, news.title, news.content)
}
}
return holder
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val news = newsList[position]
holder.newsTitle.text = news.title
}
override fun getItemCount() = newsList.size
}
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.news_title_frag, container, false)
}
override fun onActivityCreated(savedInstanceState: Bundle?) {
super.onActivityCreated(savedInstanceState)
isTwoPane = activity?.findViewById<View>(R.id.newsContentLayout) != null
val layoutManager = LinearLayoutManager(activity)
newsTitleRecyclerView.layoutManager = layoutManager
val adapter = NewsAdapter(getNews())
newsTitleRecyclerView.adapter = adapter
}
private fun getNews():List<News> {
val newsList = ArrayList<News>()
for (i in 1..50) {
val news = News("This is news title $i", getRandomLengthString("This is news content $i."))
newsList.add(news)
}
return newsList
}
private fun getRandomLengthString(str: String):String {
val n = (1..20).random()
val builder = StringBuilder()
repeat(n) {
builder.append(str)
}
return builder.toString()
}
}The above code just generates news content.
The result of running the program is:
In this way, the effect adaptation of mobile phones and tablets is realized.