Skip to content

Commit 93b51c3

Browse files
crazyqiangcrazyqiang
committed
阴影设置
1 parent 8f63dd6 commit 93b51c3

File tree

5 files changed

+250
-0
lines changed

5 files changed

+250
-0
lines changed

‎app/src/main/AndroidManifest.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
<activity
3535
android:name=".activity.RoundImageActivity"
3636
android:screenOrientation="portrait" />
37+
<activity
38+
android:name=".activity.ShadowActivity"
39+
android:screenOrientation="portrait" />
3740
<activity
3841
android:name=".activity.ShapeAbleViewActivity"
3942
android:screenOrientation="portrait" />

‎app/src/main/java/org/ninetripods/mq/study/ViewFragment.kt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import android.widget.TextView
88
import androidx.recyclerview.widget.LinearLayoutManager
99
import androidx.recyclerview.widget.RecyclerView
1010
import org.ninetripods.mq.study.activity.RoundImageActivity
11+
import org.ninetripods.mq.study.activity.ShadowActivity
1112
import org.ninetripods.mq.study.activity.ShapeAbleViewActivity
1213
import org.ninetripods.mq.study.kotlin.base.BaseFragment
1314
import org.ninetripods.mq.study.kotlin.ktx.id
@@ -31,6 +32,7 @@ class ViewFragment : BaseFragment() {
3132
val dataList = mutableListOf<ViewItem>().apply {
3233
add(ViewItem("图片设置圆角矩形、圆形等", RoundImageActivity::class.java))
3334
add(ViewItem("ShapeableImageView", ShapeAbleViewActivity::class.java))
35+
add(ViewItem("设置阴影", ShadowActivity::class.java))
3436
}
3537

3638
// 设置适配器

‎app/src/main/kotlin/org/ninetripods/mq/study/activity/ShadowActivity.kt‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
package org.ninetripods.mq.study.activity
2+
3+
import android.content.Context
4+
import android.content.res.ColorStateList
5+
import android.graphics.Color
6+
import android.graphics.Outline
7+
import android.view.View
8+
import android.view.ViewGroup
9+
import android.view.ViewOutlineProvider
10+
import android.widget.FrameLayout
11+
import android.widget.ImageView
12+
import android.widget.TextView
13+
import androidx.appcompat.widget.Toolbar
14+
import com.google.android.material.shape.CornerFamily
15+
import com.google.android.material.shape.MaterialShapeDrawable
16+
import com.google.android.material.shape.ShapeAppearanceModel
17+
import org.ninetripods.mq.study.BaseActivity
18+
import org.ninetripods.mq.study.R
19+
import org.ninetripods.mq.study.kotlin.ktx.dp2px
20+
import org.ninetripods.mq.study.kotlin.ktx.id
21+
22+
class ShadowActivity : BaseActivity() {
23+
private val mToolBar: Toolbar by id(R.id.toolbar)
24+
private val mTvShadow: TextView by id(R.id.tv_shadow)
25+
private val mIvShadow: ImageView by id(R.id.iv_shadow)
26+
private val mTvShadowOutline: TextView by id(R.id.tv_shadow_outline)
27+
private val shadowSize = 15.dp2px().toFloat()
28+
29+
// 利用MaterialShapeDrawable来设置阴影
30+
private val mTvShape: TextView by id(R.id.tv_shape)
31+
private val mFlShape: FrameLayout by id(R.id.fl_shape)
32+
33+
override fun setContentView() {
34+
setContentView(R.layout.activity_shadow_view)
35+
}
36+
37+
override fun initViews() {
38+
initToolBar(mToolBar, "阴影设置", true, false)
39+
40+
mTvShadow.run {
41+
elevation = shadowSize
42+
}
43+
44+
mIvShadow.elevation = shadowSize
45+
setOutLineProvider()
46+
47+
// 利用MaterialShapeDrawable来设置阴影
48+
mTvShape.setShadow(this, hasStroke = true, strokeWidth = 1.dp2px().toFloat())
49+
mFlShape.setShadow(this@ShadowActivity, elevationColor = Color.RED)
50+
}
51+
52+
53+
private fun setOutLineProvider() {
54+
val customOutlineProvider = object : ViewOutlineProvider() {
55+
override fun getOutline(view: View, outline: Outline) {
56+
// 设置为圆形轮廓
57+
outline.setOval(0, 0, view.width, view.height)
58+
}
59+
}
60+
// 应用到控件
61+
mTvShadowOutline.run {
62+
outlineProvider = customOutlineProvider
63+
clipToOutline = true
64+
elevation = shadowSize
65+
}
66+
}
67+
}
68+
69+
// 设置填充颜色为绿色（正常状态），按下时为红色
70+
//val fillColors = ColorStateList(
71+
// arrayOf(
72+
// intArrayOf(-android.R.attr.state_pressed), // 默认状态
73+
// intArrayOf(android.R.attr.state_pressed) // 按下状态
74+
// ),
75+
// intArrayOf(
76+
// Color.WHITE, // 默认状态填充颜色
77+
// Color.GRAY // 按下状态填充颜色
78+
// )
79+
//)
80+
81+
fun View.setShadow(
82+
context: Context,
83+
elevationWidth: Float = 10.dp2px().toFloat(),
84+
elevationColor: Int = Color.GRAY,
85+
hasStroke: Boolean = false,
86+
strokeColor: Int = Color.GRAY,
87+
strokeWidth: Float = 2.dp2px().toFloat()
88+
) {
89+
val shapeAppearanceModel = ShapeAppearanceModel.builder()
90+
.setAllCorners(CornerFamily.ROUNDED, 10.dp2px().toFloat())
91+
.build()
92+
val materialShapeDrawable = MaterialShapeDrawable(shapeAppearanceModel).apply {
93+
fillColor = ColorStateList.valueOf(Color.WHITE) //可以设置各个状态颜色（默认颜色、点击颜色等）
94+
if (hasStroke) {
95+
//有轮廓
96+
val padding = (strokeWidth / 2).toInt()
97+
setStroke(strokeWidth, ColorStateList.valueOf(strokeColor)) //设置描边宽度及颜色
98+
setPadding(padding, padding, padding, padding) //设置padding
99+
}
100+
shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS //阴影兼容模式
101+
initializeElevationOverlay(context)
102+
elevation = elevationWidth// 设置阴影高度
103+
setShadowColor(elevationColor) // 阴影颜色（半透明黑）
104+
}
105+
(this.parent as? ViewGroup)?.clipChildren = false
106+
this.background = materialShapeDrawable
107+
}

‎app/src/main/kotlin/org/ninetripods/mq/study/widget/ShadowView.kt‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
package org.ninetripods.mq.study.widget
2+
3+
import android.content.Context
4+
import android.graphics.Canvas
5+
import android.graphics.Color
6+
import android.graphics.Paint
7+
import android.util.AttributeSet
8+
import android.view.View
9+
10+
class ShadowView @JvmOverloads constructor(
11+
context: Context,
12+
attrs: AttributeSet? = null,
13+
defStyleAttr: Int = 0
14+
) : View(context, attrs, defStyleAttr) {
15+
16+
private val paint = Paint().apply {
17+
color = Color.WHITE // 控件填充色
18+
style = Paint.Style.FILL
19+
setShadowLayer(10f, 5f, 5f, Color.GRAY) // 设置阴影
20+
}
21+
22+
init {
23+
setLayerType(LAYER_TYPE_SOFTWARE, paint) // 关闭硬件加速
24+
}
25+
26+
override fun onDraw(canvas: Canvas) {
27+
super.onDraw(canvas)
28+
canvas.drawRect(50f, 50f, 200f, 200f, paint) // 绘制矩形
29+
}
30+
}

‎app/src/main/res/layout/activity_shadow_view.xml‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
android:layout_width="match_parent"
5+
android:layout_height="match_parent"
6+
android:clipChildren="false"
7+
android:gravity="center_horizontal"
8+
android:orientation="vertical">
9+
10+
<include
11+
android:id="@+id/toolbar"
12+
layout="@layout/m_toolbar" />
13+
14+
<!--MaterialShapeDrawable + ShapeAppearanceModel-->
15+
<LinearLayout
16+
android:layout_width="match_parent"
17+
android:layout_height="wrap_content"
18+
android:layout_marginTop="20dp"
19+
android:clipChildren="false"
20+
android:gravity="center"
21+
android:orientation="horizontal">
22+
23+
<TextView
24+
android:id="@+id/tv_shape"
25+
android:layout_width="100dp"
26+
android:layout_height="100dp"
27+
android:gravity="center"
28+
android:text="shadow" />
29+
30+
<!--ImageView外部套一层ViewGroup，以便能使用MaterialShapeDrawable-->
31+
<FrameLayout
32+
android:id="@+id/fl_shape"
33+
android:layout_width="100dp"
34+
android:layout_height="100dp"
35+
android:layout_marginStart="50dp">
36+
37+
<com.google.android.material.imageview.ShapeableImageView
38+
android:layout_width="match_parent"
39+
android:layout_height="match_parent"
40+
android:background="@color/white"
41+
android:scaleType="centerCrop"
42+
android:src="@drawable/icon_cat_w"
43+
app:shapeAppearance="@style/roundedCornerStyle" />
44+
</FrameLayout>
45+
</LinearLayout>
46+
47+
<!--CardView-->
48+
<androidx.cardview.widget.CardView
49+
android:layout_width="wrap_content"
50+
android:layout_height="wrap_content"
51+
android:layout_gravity="center"
52+
android:layout_marginTop="20dp"
53+
app:cardCornerRadius="10dp"
54+
app:cardMaxElevation="30dp"
55+
app:cardUseCompatPadding="true"
56+
app:cardElevation="15dp">
57+
58+
<ImageView
59+
android:id="@+id/iv_shadow"
60+
android:layout_width="100dp"
61+
android:layout_height="100dp"
62+
android:scaleType="centerCrop"
63+
android:src="@drawable/icon_cat_w" />
64+
</androidx.cardview.widget.CardView>
65+
66+
<!--elevation-->
67+
<LinearLayout
68+
android:layout_width="match_parent"
69+
android:layout_height="wrap_content"
70+
android:layout_marginTop="20dp"
71+
android:clipChildren="false"
72+
android:gravity="center"
73+
android:orientation="horizontal">
74+
75+
<TextView
76+
android:id="@+id/tv_shadow"
77+
android:layout_width="100dp"
78+
android:layout_height="100dp"
79+
android:background="@drawable/corner_bg_gray"
80+
android:gravity="center"
81+
android:text="shadow" />
82+
83+
<ImageView
84+
android:id="@+id/iv_shadow"
85+
android:layout_width="100dp"
86+
android:layout_height="100dp"
87+
android:layout_marginStart="50dp"
88+
android:background="@color/white"
89+
android:scaleType="fitXY"
90+
android:src="@drawable/icon_cat_w" />
91+
</LinearLayout>
92+
93+
<org.ninetripods.mq.study.widget.ShadowView
94+
android:layout_width="100dp"
95+
android:layout_height="100dp"
96+
android:layout_marginTop="20dp"
97+
android:visibility="gone"/>
98+
99+
<TextView
100+
android:id="@+id/tv_shadow_outline"
101+
android:layout_width="100dp"
102+
android:layout_height="100dp"
103+
android:layout_marginTop="20dp"
104+
android:background="@color/green_300"
105+
android:gravity="center"
106+
android:text="shadow" />
107+
108+
</LinearLayout>

0 commit comments

Comments
 (0)