Android 让app更加动人（美化）

最新推荐文章于 2024-05-15 05:47:27 发布

Wain丶

最新推荐文章于 2024-05-15 05:47:27 发布

阅读量9.8k

点赞数 25

分类专栏： Android 文章标签： Android效果 android美化 Anroid酷炫效果 Android高斯模糊 Android Design包

本文链接：https://blog.csdn.net/qq_38520096/article/details/79264955

版权

Android 专栏收录该内容

35 篇文章 3 订阅

订阅专栏

一、高斯模糊

高斯模糊就是类似于图片模糊的效果，高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。

效果图（图片来源于网易云音乐，其音乐播放背景就是中间图片的高斯模糊）

（1）高斯模糊算法部分

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    public Bitmap blurBitmap(Context context, Bitmap image, @FloatRange(from = 1, to = 25)
            float blurRadius) {
        // 图片缩放比例 (例如 1/10)
        int scaleRatio = 10;
        // 计算图片缩小后的长宽
        int width = Math.round(image.getWidth() / scaleRatio);
        int height = Math.round(image.getHeight() / scaleRatio);

        // 创建一张缩小后的图片做为渲染的图片
        Bitmap bitmap = Bitmap.createScaledBitmap(image, width, height, false);

        // 创建RenderScript内核对象
        RenderScript rs = RenderScript.create(context);
        // 创建一个模糊效果的RenderScript的工具对象，第二个参数Element相当于一种像素处理的算法，高斯模糊的话用这个就好
        ScriptIntrinsicBlur blurScript = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));

        // 由于RenderScript并没有使用VM来分配内存,所以需要使用Allocation类来创建和分配内存空间
        // 创建Allocation对象的时候其实内存是空的,需要使用copyTo()将数据填充进去
        Allocation input = Allocation.createFromBitmap(rs, bitmap);
        // 创建相同类型的Allocation对象用来输出
        Type type = input.getType();
        Allocation output = Allocation.createTyped(rs, type);

        // 设置渲染的模糊程度, 25f是最大模糊度
        blurScript.setRadius(blurRadius);
        // 设置blurScript对象的输入内存
        blurScript.setInput(input);
        // 将输出数据保存到输出内存中
        blurScript.forEach(output);
        // 将数据填充到bitmap中
        output.copyTo(bitmap);

        // 销毁它们释放内存
        input.destroy();
        output.destroy();
        blurScript.destroy();
        rs.destroy();
        return bitmap;
    }

（2）加载图片

//高斯模糊
        Bitmap sampleImg = BitmapFactory.decodeResource(getResources(), R.drawable.img); // 获取原图
        Bitmap gaussianBlurImg = blurBitmap(this,sampleImg, 25f);
        mImgBg.setImageBitmap(gaussianBlurImg);

二、BottomSheetDialogFragement

BottomSheetDialog（底部对话框），是android6.0以后的新组件，可以说BottomSheetDialog的效果是相当酷炫的。效果展示：

使用讲解：

（1）添加依赖

compile ‘com.android.support:design:23.2.0+‘

（2）布局（根据个人需求来布局）

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">


            <ImageView
                android:id="@+id/image_man"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?android:selectableItemBackground"
                android:gravity="center"
                android:padding="10dp"
                android:src="@drawable/man"/>
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">


            <ImageView
                android:id="@+id/image_women"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?android:selectableItemBackground"
                android:gravity="center"
                android:padding="10dp"
                android:src="@drawable/women"/>
        </RelativeLayout>


</LinearLayout>

（3）代码部分

public class UnionPaySureDialog extends BottomSheetDialogFragment {
    private View rootView;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.dialog_unionpay_sure, container);
        return rootView;
    }
}

 UnionPaySureDialog mSureDialog = new UnionPaySureDialog();
 mSureDialog.show(getSupportFragmentManager(),"UnionPay_Sure_Dialog");

三、贝塞尔曲线

贝塞尔曲线可能大家并不陌生，QQ的消息拖拽消失效果就是通过贝塞尔曲线绘制的，贝塞尔在自定义View中的应用可谓也是十分广泛的。

讲解推荐

效果图：

四、粒子爆炸效果

粒子爆炸效果的应用是十分广泛的，可以提高程序的可玩性，使app更加美观。

粒子爆炸效果推荐文章

效果展示：

五、Design设计包

Design设计规范

（1）TextInputLayout

用于包裹EditText实现点击后hint自动顶向左上方的效果

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_username"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <EditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="UserName"/>
</android.support.design.widget.TextInputLayout>

效果展示：

（2）Snackbar

带有动画效果的底部消息提示栏可以用来替代Toast，snackbar还支持滑动消失，设置按钮，如果用户没有操作，它将会在一段时间后自动消失。可实现自定义来改变其显示效果。

Snackbar.make(coordinatorLayout,"这是massage", Snackbar.LENGTH_LONG).setAction("这是action", new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this,"你点击了action",Toast.LENGTH_SHORT).show();
     }
 }).show();

效果展示：

（3）Tablayout

用于与Viewpager联动使用，实现手动换页和滑动换页效果，其代码有点多就不做代码演示了，有兴趣的可以了解一下。

其提供了两种类型：固定的Tabs（app:tabMode="fixed"）、可滑动的Tabs（app:tabMode="scrollable"）

效果展示：

（4）design包下还有很多View值得我们使用就不一一作介绍了，包括BottomSheetBehavior，NavigationView，FloatingActionButton，CoordinatorLayout，CoolapsingToolbarLayout。

六、BottomNavigationBar

底部导航栏快速实现，可配合Viewpager使用，是google官方推出的底部导航栏实现方法，所以也是相当推荐使用的。

（1）布局文件

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/main_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

（2）初始化BottomNavigationBar

  private void initmBottomBar() {
        mBottomBar.setTabSelectedListener(new MyBottomBarSelectedListener());
        mBottomBar.clearAll();
        mBottomBar.setMode(mBottomBar.MODE_FIXED);
        mBottomBar.setBackgroundStyle(mBottomBar.BACKGROUND_STYLE_STATIC);
        mBottomBar
                .addItem(new BottomNavigationItem(R.mipmap.ic_home_selected, R.string.home)
                        .setInactiveIconResource(R.mipmap.ic_home)
                        .setActiveColorResource(R.color.douban_color))
                .addItem(new BottomNavigationItem(R.mipmap.ic_book_selected, R
                        .string.book)
                        .setInactiveIconResource(R.mipmap.ic_book)
                        .setActiveColorResource(R.color.douban_color))
                .addItem(new BottomNavigationItem(R.mipmap.ic_broadcast_selected, R
                        .string.broadcast)
                        .setInactiveIconResource(R.mipmap.ic_broadcast)
                        .setActiveColorResource(R.color.douban_color))
                .addItem(new BottomNavigationItem(R.mipmap.ic_user_selected, R.string.user)
                        .setInactiveIconResource(R.mipmap.ic_user)
                        .setActiveColorResource(R.color.douban_color))
                .initialise();
    }

（3）设置监听器

  public class MyViewPagerChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            mBottomBar.selectTab(position);//设置当前选中的tab
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

    public class MyBottomBarSelectedListener implements BottomNavigationBar.OnTabSelectedListener {
        @Override
        public void onTabSelected(int position) {
            mViewPager.setCurrentItem(position);//设置当前选中的页面
        }

        @Override
        public void onTabUnselected(int position) {

        }

        @Override
        public void onTabReselected(int position) {

        }
    }

效果展示：

七、底部弹出Dialog

public class UnionpaySureDialog extends Dialog {

    private Context context;
    //这里的view其实可以替换直接传layout过来的 因为各种原因没传(lan)
    public MyDialog(Context context) {
        super(context, R.style.Unionpay_Dilog);
        this.context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog_unionpay_sure);//这行一定要写在前面
        setCancelable(false);//点击外部不可dismiss
        setCanceledOnTouchOutside(false);
        Window window = this.getWindow();
        window.setGravity(Gravity.BOTTOM);
        WindowManager.LayoutParams params = window.getAttributes();
        params.width = WindowManager.LayoutParams.MATCH_PARENT;
        params.height = WindowManager.LayoutParams.WRAP_CONTENT;
        window.setAttributes(params);
    }
}

 <style name="Unionpay_Dilog" parent="@android:style/Theme.Holo.Dialog">
        <!-- 是否有边框 -->
        <item name="android:windowFrame">@null</item>
        <!--是否在悬浮Activity之上  -->
        <item name="android:windowIsFloating">true</item>
        <!-- 标题 -->
        <item name="android:windowNoTitle">true</item>
        <!--阴影  -->
        <item name="android:windowIsTranslucent">true</item><!--半透明-->
        <!--背景透明-->
        <item name="android:windowBackground">@color/white</item>
        <!-- 还可以加入一些弹出和退出的动画 (lan)-->
        <!-- Dialog进入及退出动画 -->
        <item name="android:windowAnimationStyle">@style/ActionSheetDialogAnimation</item>
    </style>

 <!-- ActionSheet进出动画 -->
    <style name="ActionSheetDialogAnimation" parent="@android:style/Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/actionsheet_dialog_in</item>
        <item name="android:windowExitAnimation">@anim/actionsheet_dialog_out</item>
    </style>

Dialog弹出动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="100%"
    android:toYDelta="0" />

Dialog消失动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromYDelta="0"
    android:toYDelta="100%" />

Wain丶

关注

25
点赞
踩
107

收藏

觉得还不错? 一键收藏
0
评论
Android 让app更加动人（美化）

一、高斯模糊高斯模糊就是类似于图片模糊的效果，高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。效果图（图片来源于网易云音乐，其音乐播放背景就是中间图片的高斯模糊）（1）高斯模糊算法部分@Requir...
复制链接

扫一扫