APK开发示例---网页上常见的Panel效果

朴灿烈づ我的快乐病毒、 2022-04-12 11:28 181阅读 0赞

今天琢磨了一下Activity布局中圆角、边框、背景等问题。制作了panel效果，这是网页设计中常用的效果，如下图所示：  
\[align=center\]  
\[img\]http://dl2.iteye.com/upload/attachment/0113/1963/de1ac9fa-ea87-304d-857a-0d3b62b80436.png\[/img\]  
\[/align\]  
  
方法如下：  
一、Activity布局

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context="com.wallimn.iteye.ymq.AboutActivity">
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/panel_wrap">
    
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:text="关于本程序"
                android:id="@+id/textView2"
                android:layout_gravity="center_horizontal"
                android:gravity="center|center_vertical"
                android:textSize="20dp"
                android:background="@drawable/panel_title" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/about"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:textSize="20dp" />
    
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="确定"
                android:id="@+id/button5"
                android:layout_gravity="center_horizontal"
                android:onClick="exitActivity" />
        </LinearLayout>
    
    </RelativeLayout>

二、panel的整体效果，文件名：panel\_wrap.xml，位于drawable目录中。

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <corners android:radius="@dimen/panel_radius"/>
        <solid android:color="@color/panel_background"/>
        <stroke android:width="@dimen/panel_border_width" android:color="@color/panel_border"/>
    </shape>

三、panel的标题栏效果，文件名：panel\_title.xml，位于drawable目录中。

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <corners android:radius="@dimen/panel_radius"/>
        <solid android:color="@color/panel_title_background"/>
        <stroke android:width="@dimen/panel_border_width" android:color="@color/panel_border"/>
    </shape>

四、colors.xml

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="panel_border">#3d98ff</color>
        <color name="panel_title_background">#cbffda</color>
        <color name="panel_background">#ffffff</color>
    </resources>

五、dimens.xml

<resources>
        
        <dimen name="activity_horizontal_margin">16dp</dimen>
        <dimen name="activity_vertical_margin">16dp</dimen>
        <dimen name="panel_border_width">2dp</dimen>
        <dimen name="panel_radius">8dp</dimen>
    </resources>

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关网页开发基础常见html、css

目录 HTML基础（一）段落、行内和换行标签（二）文本样式标签（三）表格标签（四）表单标签（五）多行文本标签（六）列表标签（七）超链接标

青旅半醒/ 2024年03月16日 16:20/ 0 赞/ 27 阅读

相关实现网页图片的放大镜效果

实现某东上面的商品放大镜效果 ![在这里插入图片描述][20200303100145399.gif] -------------------- 实现代码

深藏阁楼爱情的钟/ 2023年07月10日 14:17/ 0 赞/ 19 阅读

相关初学ExtJs——Ext.panel.Panel

建议查看：[http://docs.sencha.com/extjs/5.0/apidocs/\!/api/Ext.panel.Panel][http_docs.sencha.

缺乏、安全感/ 2022年08月12日 03:29/ 0 赞/ 171 阅读

相关 Panel的使用

1.之前已经学习过了关于ExtJs的一些基本知识，通过导入Extjs所必须的几个包能够进行写出几个基本的小例子；下面要学习的是Extjs的另一个基本组件----

╰+哭是因爲堅強的太久メ/ 2022年08月08日 03:18/ 0 赞/ 280 阅读

相关网页中常用的效果

一、网页中常常需要显示天气： <iframe width="310" scrolling="no" height="25" frameborder="0" allowtran

Myth丶恋晨/ 2022年08月07日 00:17/ 0 赞/ 175 阅读

相关 mui app网页开发常见bug

最近用mui做app网页的开发，踩了一些小坑，在这总结一下： 1.单一网页加入有一个网页需要在app上显示，这时候我们不需要全部的mui，在mui中找到需要的例子，复制

妖狐艹你老母/ 2022年05月16日 04:27/ 0 赞/ 180 阅读

相关 APK开发示例---网页上常见的Panel效果

　　今天琢磨了一下Activity布局中圆角、边框、背景等问题。制作了panel效果，这是网页设计中常用的效果，如下图所示： \[align=center\] \[im

朴灿烈づ我的快乐病毒、/ 2022年04月12日 11:28/ 0 赞/ 182 阅读

相关 APK开发示例---比赛简易计分器

　　最近学习Android程序开发。突发奇想，琢磨了一下自身的定位：我应该是会Android开发的人里打羽毛球比较好的，会打羽毛球人里Android程序写得比较好的。　　

分手后的思念是犯贱/ 2022年04月12日 11:27/ 0 赞/ 217 阅读

相关网页的粒子效果

之前在浏览博客的时候，发现了粒子效果，现在图如下：![SouthEast][] 现把代码贴出来，供大家参考： <!DOCTYPE html> <html> <hea

超、凢脫俗/ 2021年09月14日 15:00/ 0 赞/ 419 阅读

相关 CSS3网页常见动态效果……

CSS3网页常见动态效果…… 目录 CSS3网页常见动态效果…… 一、动态背景变色，且有晃动效果二、输入框伸缩三、按钮旁边，动态的提示四、文字环绕效果

太过爱你忘了你带给我的痛/ 2021年07月25日 01:07/ 0 赞/ 649 阅读