Android Demo---如何敲出圆角的Button+圆角头像

       经常玩儿App的小伙伴都知道,APP上面有很多按钮都是圆角的,圆形给人感觉饱满,富有张力,不知道设计圆角按钮的小伙伴是不是和小编有着相同的想法`(*∩_∩*)′,听小编公司开发IOS的小伙伴说,他们里面直接有圆角的button,但是对于开发Android的小伙伴就不一样了,里面没有直接的圆角button可以供我们使用,在xml里面布局一个button,还不是圆角的,怎么办nie,方法总比困难多,我们成长的机会又来了,最近在小编的项目中,需要用到圆角的button,还需要用到圆角的头像,经过半天捣鼓,终于是圆角的啦,开心ing,效果图如下,但是效果图展示的用户中心是一张图片,不是用imageview。今天这篇博文,小编就来简单的介绍一下如何敲出圆角的Button以及圆角的头像,小编先来介绍如何敲出圆角的头像,效果图如下所示:

        

       今天这篇博文,小编做了一个关于如何制作圆角的一个Android小demo,希望可以帮助到有需要的小伙伴,首先,新建一个Android项目,在drawable_xhdpi这个文件下面,新建一个Android xml文件,取名为fillet,如下图所示:

         

         接着第二步,我们开始编写fillet里面的xml,代码如下所示:

  

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充的颜色 -->
    <solid android:color="#4392F9" />
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="5dip" /> 

<!-- padding:Button里面的文字与Button边界的间隔 -->
<padding
   android:left="10dp"
   android:top="10dp"
   android:right="10dp"
   android:bottom="10dp" />
</shape> 

        第三步,编写layout里面的文件activity_main.xml,代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <!--等一个故事的布局,写着玩儿的`(*∩_∩*)′ -->
 <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="等一个故事"/>
  <!--   圆角button的布局 -->
<Button
    android:id="@+id/filletButton"
    android:layout_gravity="center"
    android:text="圆角按钮 "
    android:textColor="#FFFFFF"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/fillet"/>
</LinearLayout> 

        第四步,编写values文件下styles.xml的内容,具体代码如下所示:

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
     <string name="action_settings">Settings</string>

</resources>

        第五步,编写FillButtonActivity.java类里面的内容,代码如下所示:    

package com.example.filletbutton;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class FilletButtonActivity extends Activity {
	  Button FilletButton;
	    @Override
	    public void onCreate(Bundle savedInstanceState) {
	        super.onCreate(savedInstanceState);
	        setContentView(R.layout.activity_main);  

	        FilletButton=(Button)findViewById(R.id.filletButton);
	      //使用匿名类注册Button事件
	        FilletButton.setOnClickListener(new OnClickListener()
	      {
	            public void onClick(View v)
	            {
	                Toast.makeText(FilletButtonActivity.this, "你点击了圆角按钮",Toast.LENGTH_LONG).show();
	            }
	        });
	    }  

}

        最后我们来看一下运行的效果,如下图所示:

        
        介绍完如何敲出圆角的Button之后,小编接着像小伙伴们介绍一下,如何敲出圆角的头像,首先,第一步,我们来编写xml里面的布局代码,具体代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".TestActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="135dp"
        android:background="@drawable/us">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="44dp">

            <ImageButton
                android:id="@+id/about_us_back"
                android:layout_width="14dp"
                android:layout_height="25.5dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:background="@drawable/back" />
             <!-- 关于我们的布局 -->
             <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="关于我们"
                android:textColor="#fff"
                android:textSize="19sp" /> 

        </FrameLayout>
        <ImageView
             android:id="@+id/imageView2"
             android:layout_width="70dp"
             android:layout_height="70dp"
             android:layout_marginTop="8dp"
             android:layout_gravity="center"
             android:layout_alignParentTop="true"
             android:layout_centerHorizontal="true"
             android:src="@drawable/my" />

        <!-- 用户昵称,无忧心情的布局 -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginBottom="5dp"
            android:textColor="#FFFFFF"
            android:text="无忧心情" />
    </FrameLayout>

</LinearLayout>

       接着,我们来编写java类里面的代码,代码如下所示:

package com.h8.imageroundcorner;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;
import android.os.Bundle;
import android.widget.ImageView;

public class TestActivity extends Activity {
	ImageView imageView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.test);
		imageView = (ImageView) findViewById(R.id.imageView2);
		Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.my);

		imageView.setImageBitmap(toRoundCorner(b,100));
	}

	public static Bitmap toRoundCorner(Bitmap bitmap, int pixels) {

		Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);

		Canvas canvas = new Canvas(output);

		final int color = 0xff424242;

		final Paint paint = new Paint();

		final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

		final RectF rectF = new RectF(rect);

		final float roundPx = pixels;

		paint.setAntiAlias(true);

		canvas.drawARGB(0, 0, 0, 0);

		paint.setColor(color);

		canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

		paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

		canvas.drawBitmap(bitmap, rect, rect, paint);
		return output;

	}

}

      最后,我们来看一下效果图:

      
     小编寄语:该博文,小编主要简单的介绍了,如何在Android应用中制作出圆角的Button。以及如何制作出圆角的头像,还是那句话对于小编来说,既是挑战更是机遇,因为知识都是相通的,再者来说,在小编的程序人生中,留下最珍贵的记忆,虽然以后小编不一定从事安卓这个行业,代码世界里,很多种事,有的甜蜜,有的温馨,有的婉转成歌,有的绵延不息,在这些故事里,我们唯一的共通之处就是,某年,某月,某个波澜不惊的日子里,曾经很爱很爱你!爱你--这段实习的日子里,安卓带给小编的种种的惊喜。    

         

       

时间: 2024-11-05 19:41:36

Android Demo---如何敲出圆角的Button+圆角头像的相关文章

Android 继承DialogFragment弹出dialog对话框

相信现在Android软件开发员,都经常用到这种方式弹出对话框的.Android继承DialogFragment弹出dialog对话框,这样弹出有很多可以灵活处理地方,想什么启动,什么时候数据接口返回都可以,有自已layout布局,生命周期.下面看看我写demo. 本文代码下载:请点击这里 转载请注明出处: http://blog.csdn.net/qq_16064871 一.MainActivity [java] view plaincopy package com.example.fragm

android标题栏下面弹出提示框(一) TextView实现,带动画效果

产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现,做着之后发现如果用popupwindow实现的话,从标题栏下面弹出就比较麻烦. 2.最外层的布局本来是用LinearLayout去实现的,然后标题栏跟弹出的那个TextView外边包裹一层RelativeLayout,这样就会有一个问题,父布局RelativeLayout高度就是标题栏高度,提示框

x 上标 下标 指数-xcode中如何敲出 x? ?

问题描述 xcode中如何敲出 x? ? 我下载了一个demo,用xcode打开,里面有 x? 这样的字符,我也尝试的敲出来,但一直没有敲出来.不管我用 mac 下的 Pages 还是 文本编辑 或者是 word 都可以敲出 x? ,但我复制 粘贴到 xcode 中就变了,变成了 xn 了.有知道怎么在 xcode 中敲出 上标 和 下标 的请告诉小弟.多谢! 解决方案 怎么没人回答.. 别沉了啊

LeadTools Android 入门教学——运行第一个Android Demo

LeadTools 有很多Windows平台下的Demo,非常全面,但是目前开发手机应用的趋势也越来越明显,LeadTools也给大家提供了10个Android的Demo,这篇文章将会教你如何运行第一个Android Demo,我想只有把Demo跑起来了,才能更好地使用LeadTools开发自己的原生Android应用,当然大家也可以把Demo改吧改吧就是自己的原生Android应用. 说到Android平台,LeadTools提供了非常全面的支持,但是要将第一个Demo跑起来,License是

Android 中Popwindow弹出菜单的两种方法实例

Android 中Popwindow弹出菜单的两种方法实例 1.popWindow就是对话框的一种方式! 此文讲解的android中对话框的一种使用方式,它叫popWindow. 2.popWindow的特性 Android的对话框有两种:PopupWindow和AlertDialog.它们的不同点在于: AlertDialog的位置固定,而PopupWindow的位置可以随意. AlertDialog是非阻塞线程的,而PopupWindow是阻塞线程的. PopupWindow的位置按照有无偏

Android键盘自动弹出解决方法分析

本文实例分析了Android键盘自动弹出解决方法.分享给大家供大家参考,具体如下: 1.在:复制代码 代码如下:activity android:name=".Uninstaller" android:label="@string/app_name" android:windowSoftInputMode="adjustPan"加入了:复制代码 代码如下:android:windowSoftInputMode="adjustPan&qu

Android分页中显示出下面翻页的导航栏的布局实例代码

当页面条目过多的时候需要分页,要在布局中显示出分页的相关布局,使用android:layout_weight="11" activity_call_safe.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay

Android实现自定义带文字和图片Button的方法

  本文实例讲述了Android实现自定义带文字和图片Button的方法.分享给大家供大家参考.具体分析如下: 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最小.在Button的属性中有一个是drawableLeft,这个属性可以把图片设置在文字的左边,但是这种方式必须让icon的背景色是透明的,如果icon的背景色不是透明的话,会导致点击按钮

Android解决dialog弹出时无法捕捉Activity的back事件的方法

  本文实例讲述了Android解决dialog弹出时无法捕捉Activity的back事件的方法.分享给大家供大家参考.具体分析如下: 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到back事件: 1)重写onKeyDown或者onKeyUp方法 2)重写onBackPressed方法 3)重写dispatchKeyEvent方法 这三种办法有什么区别在这里不进行阐述,有兴趣的朋友可以查阅相关资料. 然而在有dialog弹出