安卓学习之计算器样式

界面效果:

安卓学习之计算器样式_第1张图片

源码:https://github.com/yugj/Calculator-layout

布局管理器:LinearLayout

部分布局文件如下:

屏幕:

<LinearLayout
android:layout_marginBottom="@dimen/calculator_button_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:id="@+id/screen"
android:text="test"
android:layout_marginBottom="@dimen/calculator_screen_bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/shape_textview"/>
</LinearLayout
按钮:

<LinearLayout
android:layout_marginBottom="@dimen/calculator_button_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="@+id/id_clear"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/button_selector" //设置背景为一个选择器,选择器下面介绍
android:textColor="@drawable/color_button_text" //按钮文字颜色设置
android:layout_marginRight="@dimen/calculator_button_margin"
android:layout_weight="1" //按钮权重,相对其他按钮
android:text="@string/clear"/>
</LinearLayout>
按钮文字颜色控制:drawable/color_button_text
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#000000" />
</selector>

按钮选择器:drawable/button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/shape_button_pressed" android:state_pressed="true"/> //按下按钮效果
<item android:drawable="@drawable/shape_button_nomal" android:state_pressed="false"/> //未按按钮效果
</selector>

按钮按下时布局:drawable/shape_button_pressed

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 边框颜色值 -->
<item>
<shape>
<solid android:color="#000000" />
<corners android:radius="5dip" />
</shape>
</item>

<!-- 主体背景颜色值 -->
<item android:bottom="1dp" android:right="1dp" android:top="1dp" android:left="1dp">
<shape>
<!--背景颜色-->
<solid android:color="#c9cdcd" />
<!--背景颜色渐变效果-->
<!--<gradient android:startColor="#e1e6e6" android:endColor="#c3cacc" android:angle="270"/>-->
<!--圆角-->
<corners android:radius="5dip" />

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
按钮未按时布局:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 边框颜色值 -->
<item>
<shape>
<solid android:color="#8d9092" />
<corners android:radius="5dip" />
</shape>
</item>

<!-- 主体背景颜色值 -->
<item android:bottom="1dp" android:right="1dp" android:top="1dp" android:left="1dp">
<shape>
<!--背景颜色-->
<!--<solid android:color="#d7dddd" />-->
<!--背景颜色渐变效果-->
<gradient android:startColor="#e1e6e6" android:endColor="#c3cacc" android:angle="270"/>
<!--圆角-->
<corners android:radius="5dip" />

<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
震动需在manifest添加:<uses-permission android:name="android.permission.VIBRATE"/>


你可能感兴趣的:(安卓学习之计算器样式)