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

  今天琢磨了一下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>
<!-- Default screen margins, per the Android Design guidelines. -->
<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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SwipePanel(侧划控件)Background对市面上实现的侧划返回不是很满意(仿微信,QQ 通过修改窗口透明坑太多),最终决定还是亲手写一个高实用性的吧,效果如下所示,换个图标,更多划动功能可以由你自己解锁,总共一个 600 多行代码的类,推荐通过阅读源码,你肯定会收获很多哈。Preview DownloadGradle:implementation 'com.blankj:swipe-panel:1.0'How to use动态final SwipePanel swipePanel = new SwipePanel(this); swipePanel.setLeftEdgeSize(SizeUtils.dp2px(100));// 设置左侧触发阈值 100dp swipePanel.setLeftDrawable(R.drawable.base_back);// 设置左侧 icon swipePanel.wrapView(findViewById(R.id.rootLayout));// 设置嵌套在 rootLayout 外层 swipePanel.setOnFullSwipeListener(new SwipePanel.OnFullSwipeListener() {// 设置完全划开松手后的监听     @Override     public void onFullSwipe(int direction) {         finish();         swipePanel.close(direction);// 关闭     } });静态<com.blankj.swipepanel.SwipePanel         xmlns:android="http://schemas.android.com/apk/res/android"         xmlns:tools="http://schemas.android.com/tools"         xmlns:app="http://schemas.android.com/apk/res-auto"         android:id="@ id/swipePanel"         android:background="@color/mediumGray"         android:layout_width="match_parent"         android:layout_height="match_parent"         tools:context=".LayoutSwipePanelActivity"         app:isLeftCenter="false"         app:leftEdgeSize="100dp"         app:leftSwipeColor="@color/colorPrimary"         app:leftDrawable="@drawable/base_back">     ... </com.blankj.swipepanel.SwipePanel>API方法名属性名说明setLeft(Top, Right, Bottom)SwipeColorapp:left(top, right, bottom)SwipeColor设置左(上、右、下)测颜色setLeft(Top, Right, Bottom)EdgeSizeapp:left(top, right, bottom)EdgeSize设置左(上、右、下)测触发阈值setLeft(Top, Right, Bottom)Drawableapp:left(top, right, bottom)Drawable设置左(上、右、下)测 iconsetLeft(Top, Right, Bottom)Centerapp:isLeft(Top, Right, Bottom)Center设置左(上、右、下)测是否居中setLeft(Top, Right, Bottom)Enabledapp:isLeft(Top, Right, Bottom)Enabled设置左(上、右、下)测是否可用wrapView---设置嵌套在该 view 的外层setOnFullSwipeListener---设置完全划开松手后的监听isOpen---判断是否被划开close---关闭

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值