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

简介:        经常玩儿App的小伙伴都知道,APP上面有很多按钮都是圆角的,圆形给人感觉饱满,富有张力,不知道设计圆角按钮的小伙伴是不是和小编有着相同的想法`(*∩_∩*)′,听小编公司开发IOS的小伙伴说,他们里面直接有圆角的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。以及如何制作出圆角的头像,还是那句话对于小编来说,既是挑战更是机遇,因为知识都是相通的,再者来说,在小编的程序人生中,留下最珍贵的记忆,虽然以后小编不一定从事安卓这个行业,代码世界里,很多种事,有的甜蜜,有的温馨,有的婉转成歌,有的绵延不息,在这些故事里,我们唯一的共通之处就是,某年,某月,某个波澜不惊的日子里,曾经很爱很爱你!爱你--这段实习的日子里,安卓带给小编的种种的惊喜。    


         

       

目录
相关文章
|
6月前
|
Java Maven 开发工具
第一个安卓项目 | 中国象棋demo学习
本文是作者关于其第一个安卓项目——中国象棋demo的学习记录,展示了demo的运行结果、爬坑记录以及参考资料,包括解决Android Studio和maven相关问题的方法。
第一个安卓项目 | 中国象棋demo学习
|
7月前
|
XML API Android开发
码农之重学安卓:利用androidx.preference 快速创建一、二级设置菜单(demo)
本文介绍了如何使用androidx.preference库快速创建具有一级和二级菜单的Android设置界面的步骤和示例代码。
213 1
码农之重学安卓:利用androidx.preference 快速创建一、二级设置菜单(demo)
|
7月前
|
XML 前端开发 Android开发
Android经典实战之Kotlin中实现圆角图片和圆形图片
本文介绍两种实现圆角图像视图的方法。第一种是通过自定义Kotlin `AppCompatImageView`,重写`onDraw`方法使用`Canvas`和`Path`进行圆角剪裁。第二种利用Android Material库中的`ShapeableImageView`,简单配置即可实现圆角效果。两种方法均易于实现且提供动态调整圆角半径的功能。
135 0
|
9月前
|
开发工具 Android开发
Android 代码自定义drawble文件实现View圆角背景
Android 代码自定义drawble文件实现View圆角背景
216 0
|
9月前
|
XML Java Android开发
15. 【Android教程】按钮 Button/ImageButton
15. 【Android教程】按钮 Button/ImageButton
148 2
|
10月前
|
XML Android开发 数据格式
Android下自定义Button样式
Android下自定义Button样式
72 3
|
API Android开发 计算机视觉
视觉智能平台有android人脸识别拍照demo?
视觉智能平台有android人脸识别拍照demo么?
126 0
|
Java Android开发
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
|
Java Android开发 开发者
1024程序节|Android框架之一 BRVAH【BaseRecyclerViewAdapterHelper】使用demo
BRVAH是一个强大的RecyclerAdapter框架(什么是RecyclerView?),它能节约开发者大量的开发时间,集成了大部分列表常用需求解决方案。为什么会有它?请查看「Android开源框架BRVAH由来篇」该框架于2016年4月10号发布的第1个版本到现在已经一年多了,经历了800多次代码提交,140多次版本打包,修复了1000多个问题,获得了9000多star,非常感谢大家的使用以及反馈。
280 0
|
Android开发
#5,Android Studio Android 按钮 button
#5,Android Studio Android 按钮 button

热门文章

最新文章

  • 1
    Android历史版本与APK文件结构
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 4
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 5
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 7
    【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
  • 8
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
  • 9
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
  • 10
    Android实战经验之Kotlin中快速实现MVI架构
  • 1
    【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
    55
  • 2
    android FragmentManager 删除所有Fragment 重建
    25
  • 3
    Android实战经验之Kotlin中快速实现MVI架构
    39
  • 4
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
    38
  • 5
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    43
  • 6
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    151
  • 7
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    50
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    66
  • 9
    Android历史版本与APK文件结构
    169
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    52