骑行客 發表於 2023-8-3 18:26:00

Android开发 Jetpack Compose Shape形状

<p><span style="color: rgba(22, 145, 121, 1)">                          </span>本文来自博客园，作者：观心静&nbsp;，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17603252.html</p>
<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;                     本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。</p>
<h1><span style="color: rgba(22, 145, 121, 1)">前言</span></h1>
<p>  此篇博客讲解&nbsp;Jetpack Compose Shape的使用，此篇博客配合<span role="heading" aria-level="2">Android开发 Jetpack_Compose_4 Modifier修饰符</span> 一起看效果更佳。</p>
<h1><span style="color: rgba(22, 145, 121, 1)">圆角形状</span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">RoundedCornerShape</span></p>
<p><span style="color: rgba(0, 0, 0, 1)">效果图</span></p>
<p><span style="color: rgba(0, 0, 0, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803174434614-1526548465.png"></span></p>
<p><span style="color: rgba(0, 0, 0, 1)">代码</span></p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    Column(
      Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      //RoundedCornerShape
      Surface(shape = RoundedCornerShape(10.dp), color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<h1><span style="color: rgba(22, 145, 121, 1)">在指定位置上的圆角</span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">效果图</span></p>
<p><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803174033444-909416372.png"></span></p>
<p><span style="color: rgba(0, 0, 0, 1)">代码</span></p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    Column(
      Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      //RoundedCornerShape
      Surface(shape = RoundedCornerShape(topStart = 10.dp), color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<h1><span style="color: rgba(22, 145, 121, 1)">绝对圆角形状</span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">AbsoluteRoundedCornerShape其实RoundedCornerShape与一样都是实现圆角形状的，但是AbsoluteRoundedCornerShape不会跟随屏幕方向改变角的位置(应该是用来在阿拉伯语言下设备变成了从右到左布局，在这种情况下保持圆角的位置)</span></p>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803175138471-1934003267.png"></p>
<p>代码</p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    Column(
      Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      //AbsoluteRoundedCornerShape
      Surface(shape = AbsoluteRoundedCornerShape(10.dp), color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<h1><span style="color: rgba(22, 145, 121, 1)">切角形状</span></h1>
<p>效果图</p>
<h1><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803175441742-814161968.png"></span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">代码</span></p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    Column(
      Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      //CutCornerShape
      Surface(shape = CutCornerShape(10.dp), color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<h1><span style="color: rgba(22, 145, 121, 1)">绝对切角形状</span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">AbsoluteCutCornerShape其实CutCornerShape与一样都是实现切角形状的，但是AbsoluteCutCornerShape不会跟随屏幕方向改变角的位置(应该是用来在阿拉伯语言下设备变成了从右到左布局，在这种情况下保持切角的位置)</span></p>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803174358296-298578300.png"></p>
<p>代码</p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    Column(
      Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      //AbsoluteCutCornerShape
      Surface(shape = AbsoluteCutCornerShape(10.dp), color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<h1><span style="color: rgba(22, 145, 121, 1)">圆形</span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">关键是CircleShape</span></p>
<p><span style="color: rgba(0, 0, 0, 1)">效果图</span></p>
<p><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230817170222789-2037286989.png"></span></p>
<p><span style="color: rgba(0, 0, 0, 1)">代码</span></p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>Card(
    shape = CircleShape,
    backgroundColor = COLOR_FFC3CEFF,
    modifier = Modifier.size(86.dp)
) {

}</code></pre>
<h1><span style="color: rgba(22, 145, 121, 1)">自定义形状</span></h1>
<p><span style="color: rgba(0, 0, 0, 1)">GenericShape通过path绘制自己想要的形状</span></p>
<h2><span style="color: rgba(35, 111, 161, 1)">画个三角形</span></h2>
<p><span style="color: rgba(0, 0, 0, 1)">效果图</span></p>
<p><span style="color: rgba(22, 145, 121, 1)"><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803181534633-826916018.png"></span></p>
<p><span style="color: rgba(0, 0, 0, 1)">代码</span></p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    //GenericShape画个三角形
    val shape = GenericShape{size, layoutDirection -&gt;
      moveTo(size.width/2,0f)
      lineTo(size.width,size.height)
      lineTo(0f,size.height)
      close()
    }
    Column(
      Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      Surface(shape = shape, color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<h2><span style="color: rgba(35, 111, 161, 1)">画个五角星</span></h2>
<p>效果图</p>
<p><img src="https://img2023.cnblogs.com/blog/1497956/202308/1497956-20230803183424331-181058479.png"></p>
<p>代码</p>
<pre class="highlighter-hljs" data-dark-theme="true"><code>@Composable
fun APage() {
    //GenericShape画个五角星
    val shape = GenericShape { size, layoutDirection -&gt;
      val centerX = size.width / 2
      val centerY = size.height / 2
      val radius = size.width / 2
      val xPointList = mutableListOf&lt;Float&gt;()
      val yPointList = mutableListOf&lt;Float&gt;()
      for (i in 0..4) {
            val angle = 360 / 5 * i + 18
            val px = centerX + radius * cos(angle * Math.PI / 180).toFloat()
            val py = centerY - radius * sin(angle * Math.PI / 180).toFloat()
            xPointList.add(px)
            yPointList.add(py)
      }
      moveTo(xPointList, yPointList)
      lineTo(xPointList, yPointList)
      lineTo(xPointList, yPointList)
      lineTo(xPointList, yPointList)
      lineTo(xPointList, yPointList)
      close()
    }
    Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
      Surface(shape = shape, color = Color.DarkGray, modifier = Modifier.width(50.dp).height(50.dp)) {}
    }
}</code></pre>
<p>end</p>

</div>
<div id="MySignature" role="contentinfo">
    <div style="text-align: center">
    <p style="color:orange;font-size:16px;" >本文来自博客园，作者：观心静 ，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/17603252.html </p>
    <div style="color:orange;font-size:16px;">本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div>
</div><br><br>
来源：https://www.cnblogs.com/guanxinjing/p/17603252.html
頁: [1]
查看完整版本: Android开发 Jetpack Compose Shape形状