碎片的使用

要求

• 新建一个项目，项目中包含 2 个 Fragment ：

• 第一个 Fragment 包含一个 RecyclerView , 每个 item 的界面为左侧一个水果图像，右侧显示水果名称和单价，点击任一 item 可显示第二个 Fragment, 如图 1a ；

• 第二个 Fragment 界面如图 1b 所示，点击其中的“ + ”，“ - “键可更改订单数量；

• 程序根据使用设备的屏幕大小自动排列 2 个 Fragment, 如果是手机则把第一个 Fragment 置于第一个 Activity, 第二个 Fragment 置于第二个 Activity, 点击 item 从第一个 Activity 跳转到第二个 Activity; 如果是平板，则 2 个 Fragment 置于同一个 Activity 中，第一个 Fragment 在左，第二个 Fragment 在右，第二个 Fragment 中的内容随所选 item 的变化而变化。

MainActivity:

package com.example.yzlweek6

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

 activity_main布局:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/fruitTitleLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fruitTitleFrag"
        android:name="com.example.yzlweek6.FruitTitleFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

FruitContentActivity:

package com.example.yzlweek6

import android.content.Context
import android.content.Intent
import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class FruitContentActivity : AppCompatActivity() {

    companion object{
        fun actionStart(context: Context, name:String, imageid:Int, fruitprice:String){
            val intent=Intent(context,FruitContentActivity::class.java).apply {
                putExtra("fruit_name",name)
                putExtra("fruit_imageid",imageid)
                putExtra("fruit_price",fruitprice)
            }
            context.startActivity(intent)
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fruit_content)
        val name=intent.getStringExtra("fruit_name")
        val imageid= intent.getIntExtra("fruit_imageid",0)
        val fruitprice=intent.getStringExtra("fruit_price")
        if (name!=null&&fruitprice!=null){
            val fragment=supportFragmentManager.findFragmentById(R.id.fruitContentFrag) as FruitContentFragment
            fragment.refresh(name,imageid,fruitprice)
        }
    }
}

 activity_fruit_content布局:

package com.example.yzlweek6

import android.content.Context
import android.content.Intent
import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class FruitContentActivity : AppCompatActivity() {

    companion object{
        fun actionStart(context: Context, name:String, imageid:Int, fruitprice:String){
            val intent=Intent(context,FruitContentActivity::class.java).apply {
                putExtra("fruit_name",name)
                putExtra("fruit_imageid",imageid)
                putExtra("fruit_price",fruitprice)
            }
            context.startActivity(intent)
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fruit_content)
        val name=intent.getStringExtra("fruit_name")
        val imageid= intent.getIntExtra("fruit_imageid",0)
        val fruitprice=intent.getStringExtra("fruit_price")
        if (name!=null&&fruitprice!=null){
            val fragment=supportFragmentManager.findFragmentById(R.id.fruitContentFrag) as FruitContentFragment
            fragment.refresh(name,imageid,fruitprice)
        }
    }
}

FruitTitleFragment:

package com.example.yzlweek6

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.fragment.app.Fragment
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class FruitTitleFragment:Fragment() {
    private var isTwoPane=false

    inner class FruitAdapter(val fruitList: List<Fruit>):RecyclerView.Adapter<FruitAdapter.ViewHolder>(){
        inner class ViewHolder(view: View):RecyclerView.ViewHolder(view){
            val name:TextView=view.findViewById(R.id.fruitname)
            val fruitimage:ImageView=view.findViewById(R.id.fruitImage)
            val fruitprice:TextView=view.findViewById(R.id.fruitprice)
        }

        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
            val view=LayoutInflater.from(parent.context).inflate(R.layout.fruit_item,parent,false)
            val holder=ViewHolder(view)
            holder.itemView.setOnClickListener{
                val fruit=fruitList[holder.adapterPosition]
                if (isTwoPane){
                    activity?.apply {
                        val fragment=supportFragmentManager.findFragmentById(R.id.fruitContentFrag) as FruitContentFragment
                        fragment.refresh(fruit.name,fruit.imageid,fruit.fruitprice)
                    }
                }else{
                    FruitContentActivity.actionStart(parent.context,fruit.name,fruit.imageid,fruit.fruitprice)
                }
            }
            return holder
        }

        override fun onBindViewHolder(holder: ViewHolder, position: Int) {
            val fruit=fruitList[position]
            holder.fruitimage.setImageResource(fruit.imageid)
            holder.name.text=fruit.name
            holder.fruitprice.text=fruit.fruitprice
        }

        override fun getItemCount()=fruitList.size
    }


    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fruit_title_frag,container,false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)
        isTwoPane=activity?.findViewById<View>(R.id.fruitContentLayout)!=null
        val layoutManager=LinearLayoutManager(activity)
        activity?.apply {
            val fruitTitleRecyclerView:RecyclerView=findViewById(R.id.fruitTitleRecyclerView)
            fruitTitleRecyclerView.layoutManager=layoutManager
            val adapter=FruitAdapter(getFruit())
            fruitTitleRecyclerView.adapter=adapter
        }
    }

    private fun getFruit():List<Fruit>{
        val fruitlist=ArrayList<Fruit>()
        fruitlist.add(Fruit("apple",R.drawable.apple_pic,"$2/kg"))
        fruitlist.add(Fruit("banana",R.drawable.banana_pic,"$4/kg"))
        fruitlist.add(Fruit("orange",R.drawable.orange_pic,"$5/kg"))
        fruitlist.add(Fruit("watermalon",R.drawable.watermelon_pic,"$6/kg"))
        fruitlist.add(Fruit("pear",R.drawable.pear_pic,"$7/kg"))
        fruitlist.add(Fruit("pineapple",R.drawable.pineapple_pic,"$8/kg"))
        fruitlist.add(Fruit("strawberry",R.drawable.strawberry_pic,"$9/kg"))
        fruitlist.add(Fruit("cherry",R.drawable.cherry_pic,"$10/kg"))
        fruitlist.add(Fruit("mango",R.drawable.mango_pic,"$11/kg"))
        return fruitlist
    }
}

fruit_title_frag布局:

<?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/fruitTitleRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

FruitContentFragment:

package com.example.yzlweek6

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.ImageView
import android.widget.LinearLayout
import android.widget.TextView
import android.widget.Toast
import androidx.fragment.app.Fragment

class FruitContentFragment:Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view=inflater.inflate(R.layout.fruit_content_frag,container,false)
        val decreaseButton=view.findViewById<Button>(R.id.decreaseButton)
        val increaseButton=view.findViewById<Button>(R.id.increaseButton)
        val OrderButton=view.findViewById<Button>(R.id.Order)
        val fruitNumber=view.findViewById<TextView>(R.id.fruitNumber)
        val price=view.findViewById<TextView>(R.id.price)
        val unitprice=view.findViewById<TextView>(R.id.unitprice)
        val fruitName=view.findViewById<TextView>(R.id.fruitName)
        decreaseButton.setOnClickListener {
            var num=fruitNumber.text.toString().toInt()
            if (num>0){
                fruitNumber.text=num.toString()
                num-=1
                fruitNumber.text=num.toString()
                val pricestr=(num*unitprice.text.toString().replace("$","").replace("/kg","").toInt()).toFloat()
                price.text="$"+String.format("%.2f",pricestr)
            }
        }
        increaseButton.setOnClickListener {
            var num=fruitNumber.text.toString().toInt()
            fruitNumber.text=num.toString()
            num+=1
            fruitNumber.text=num.toString()
            val pricestr=(num*unitprice.text.toString().replace("$","").replace("/kg","").toInt()).toFloat()
            price.text="$"+String.format("%.2f",pricestr)
        }
        OrderButton.setOnClickListener {
            var num=fruitNumber.text.toString().toInt()
            fruitNumber.text=num.toString()
            Toast.makeText(context,"您已订购了，${fruitNumber.text}kg${fruitName.text}，总计${price.text}$",Toast.LENGTH_SHORT).show()
        }
        return view
    }

    fun refresh(name:String,imageid:Int,fruitprice:String){
        activity?.apply {
            val contentLayout=findViewById<LinearLayout>(R.id.contentLayout)
            contentLayout.visibility=View.VISIBLE
            val fruitName=findViewById<TextView>(R.id.fruitName)
            fruitName.text=name
            val fruitImage=findViewById<ImageView>(R.id.fruitimage)
            fruitImage.setImageResource(imageid)
            val unitprice=findViewById<TextView>(R.id.unitprice)
            unitprice.text=fruitprice
            val fruitNumber=findViewById<TextView>(R.id.fruitNumber)
            fruitNumber.text="0"
            val price=findViewById<TextView>(R.id.price)
            price.text="$0.00"
        }
    }
}

fruit_content_frag布局:

<?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/fruitName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="10dp"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/fruitimage"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:layout_marginTop="50dp"/>

        <RelativeLayout
            android:id="@+id/UnitPriceLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="50dp">

            <TextView
                android:id="@+id/UnitPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textSize="20sp"
                android:text="Unit Price:"/>
            
            <TextView
                android:id="@+id/unitprice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textSize="20sp"
                android:layout_toRightOf="@+id/UnitPrice"/>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/fruitAmountLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="10dp">

            <TextView
                android:id="@+id/fruitAmount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="50dp"
                android:padding="10dp"
                android:text="Amount:"
                android:textSize="20sp" />

            <Button
                android:id="@+id/decreaseButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/fruitAmount"
                android:text="-" />

            <TextView
                android:id="@+id/fruitNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textSize="20sp"
                android:text="0"
                android:layout_toRightOf="@id/decreaseButton"/>

            <Button
                android:id="@+id/increaseButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/fruitNumber"
                android:text="+" />

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/totalPriceLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:padding="10dp">

            <TextView
                android:id="@+id/totalPrice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:textSize="20sp"
                android:text="Total Price:"/>
            
            <TextView
                android:id="@+id/price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/totalPrice"
                android:padding="10dp"
                android:textSize="20sp"
                android:text="$0.00"/>

        </RelativeLayout>

        <Button
            android:id="@+id/Order"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="Order"/>

    </LinearLayout>

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:background="#000"/>

</RelativeLayout>

Fruit:

package com.example.yzlweek6

class Fruit(val name:String, val imageid:Int, var fruitprice:String)

fruit_item布局:

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

    <ImageView
        android:id="@+id/fruitImage"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp"/>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="10dp">
        <TextView
            android:id="@+id/fruitname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </TextView>

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/fruitprice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:textColor="@android:color/darker_gray">
        </TextView>
    </RelativeLayout>


</LinearLayout>

sw600dp/activity_main布局:

<?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/fruitTitleFrag"
        android:name="com.example.yzlweek6.FruitTitleFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <FrameLayout
        android:id="@+id/fruitContentLayout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <fragment
            android:id="@+id/fruitContentFrag"
            android:name="com.example.yzlweek6.FruitContentFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

</LinearLayout>