中间的图标凸凹类似知乎的tablayout
上ui
1、xml代码
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F4F4F6"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<FrameLayout
android:id="@+id/fl_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="56dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="94dp"
android:layout_gravity="bottom"
android:background="@drawable/home_layout_bg"
android:baselineAligned="false"
android:gravity="center">
<LinearLayout
android:id="@+id/ll_detail_ft"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginTop="18dp"
android:layout_weight="1"
android:background="@drawable/mine_onclick_bg"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/iv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/detail1_v1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="3dp"
android:text="明细"
android:textColor="@color/tab_text_color_selected" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_chart_ft"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginTop="18dp"
android:layout_weight="1"
android:background="@drawable/mine_onclick_bg"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/iv_chart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/chart_v2" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_chart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="3dp"
android:text="图表" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_accounting_ft"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home_add_v1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_accounting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:paddingTop="4dp"
android:text="记账" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_account_ft"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginTop="18dp"
android:layout_weight="1"
android:background="@drawable/mine_onclick_bg"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/iv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/account_v2" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_account"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="3dp"
android:text="账户" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_my_ft"
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginTop="18dp"
android:layout_weight="1"
android:background="@drawable/mine_onclick_bg"
android:gravity="center"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="@+id/iv_my"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/me2_v1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/tv_my"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="3dp"
android:text="我的" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
2、代码添加对应的页面
class MainActivity : BaseActivity() {
var detailFragment = DetailFragment()//明细
var chartFragment = ChartFragment()//图表
var accountFragment = AccountFragment()//账户
var myFragment = MyFragment()//我的
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var beginTransaction = supportFragmentManager.beginTransaction()
beginTransaction.add(R.id.fl_container, detailFragment)
beginTransaction.add(R.id.fl_container, chartFragment)
beginTransaction.add(R.id.fl_container, accountFragment)
beginTransaction.add(R.id.fl_container, myFragment)
beginTransaction.show(detailFragment)
beginTransaction.hide(chartFragment)
beginTransaction.hide(accountFragment)
beginTransaction.hide(myFragment)
beginTransaction.commit()
ll_detail_ft.setOnClickListener {
var beginTransaction = supportFragmentManager.beginTransaction()
beginTransaction.show(detailFragment)
beginTransaction.hide(chartFragment)
beginTransaction.hide(accountFragment)
beginTransaction.hide(myFragment)
beginTransaction.commit()
//改变图片文字
iv_detail.setImageDrawable(getDrawable(R.drawable.detail1_v1))
tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_selected))
iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v2))
tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_account.setImageDrawable(getDrawable(R.drawable.account_v2))
tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_my.setImageDrawable(getDrawable(R.drawable.me2_v1))
tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
}
ll_chart_ft.setOnClickListener {
var beginTransaction = supportFragmentManager.beginTransaction()
beginTransaction.hide(detailFragment)
beginTransaction.show(chartFragment)
beginTransaction.hide(accountFragment)
beginTransaction.hide(myFragment)
beginTransaction.commit()
//改变图片文字
iv_detail.setImageDrawable(getDrawable(R.drawable.detail_v2))
tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v1))
tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_selected))
tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_account.setImageDrawable(getDrawable(R.drawable.account_v2))
tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_my.setImageDrawable(getDrawable(R.drawable.me2_v1))
tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
}
ll_accounting_ft.setOnClickListener {
//记账
var intent = Intent(this, AccountingActivity().javaClass)
startActivity(intent)
}
ll_account_ft.setOnClickListener {
var beginTransaction = supportFragmentManager.beginTransaction()
beginTransaction.hide(detailFragment)
beginTransaction.hide(chartFragment)
beginTransaction.show(accountFragment)
beginTransaction.hide(myFragment)
beginTransaction.commit()
//改变图片文字
iv_detail.setImageDrawable(getDrawable(R.drawable.detail_v2))
tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v2))
tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_account.setImageDrawable(getDrawable(R.drawable.account_v1))
tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_selected))
iv_my.setImageDrawable(getDrawable(R.drawable.me2_v1))
tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
}
ll_my_ft.setOnClickListener {
var beginTransaction = supportFragmentManager.beginTransaction()
beginTransaction.hide(detailFragment)
beginTransaction.hide(chartFragment)
beginTransaction.hide(accountFragment)
beginTransaction.show(myFragment)
beginTransaction.commit()
//改变图片文字
iv_detail.setImageDrawable(getDrawable(R.drawable.detail_v2))
tv_detail.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_chart.setImageDrawable(getDrawable(R.drawable.chart_v2))
tv_chart.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
tv_accounting.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_account.setImageDrawable(getDrawable(R.drawable.account_v2))
tv_account.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_unselected))
iv_my.setImageDrawable(getDrawable(R.drawable.me1_v1))
tv_my.setTextColor(ContextCompat.getColor(this@MainActivity,
R.color.tab_text_color_selected))
}
}
}
图片下面的tab不会遮挡数据