透明UI设计

Android设计之UI透明图标 大家肯定都经历Android的APP图标的痛苦,有时找到一个合适的图标,堪比解决一个困难的代码。 可我们有时在网上找到了合适的图片,或者手里有的图片,需要进一步抠图,或者要求背景透明,又让一些人抓了狂。 最近在做UI界面时,发现了Windows10自带的一个强大的图片工具:3D画图,可以抠图,或者制作图片背景透明等。 首先请参考这个链接:https://blog.youkuaiyun.com/cungudaf... 阅读详情

之前学习java和android时,在app市场,找到一个不错的学习软件Java学习手册、Android学习手册,挺喜欢它的那个透明的UI设计

现仿照它自己做了一个,加深自己的功力。



这个App一共用到以下几种功能:
1.GridView 九宫格(显示item)
2.ViewPage+Fragment(经典的滑动切换菜单)
3.ObjectAnimator 动画(控制page图标切换)
4.TranslateAnimation 横移动画(控制主layout的移动)
5.DrawerLayout  v4包自带抽屉功能(即侧滑菜单,但主layout不会移动),配合上面的TranslateAnimation实现主+副一起移动


主Activity代码:

package com.example.xin_test_alphaviewpage;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.opengl.Visibility;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v4.widget.DrawerLayout.DrawerListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.TranslateAnimation;
import android.view.Display;
import android.view.Gravity;
import android.view.MenuItem;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class MainActivity extends FragmentActivity {

	private ViewPager mViewPager;// 多页面划动视图
	private ViewPagerAdapter mViewPagerAdapter;// 设置自定义ViewPager的适配器

	private Fragment1 mFragment2 = new Fragment1();
	private Fragment2 mFragment3 = new Fragment2();

	private ImageView iv_main_page;
	ObjectAnimator anim,anim1;
	private ImageButton btn_arrow;
	private boolean isClickArrow = false;
	private boolean isOpen = false;
	private DrawerLayout mDrawerLayout;// 总布局
	private RelativeLayout relLay_menu;// 主布局
	private LinearLayout linLay_menu;// 分布局

	private ActionBarDrawerToggle mDrawerToggle;

	private int x = 0;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);// 设置全屏
		requestWindowFeature(Window.FEATURE_NO_TITLE);// 去除标题栏
		setContentView(R.layout.activity_main);
		setUpViewPager();
		// 三个布局对象
		mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLay);
		relLay_menu = (RelativeLayout) findViewById(R.id.relLay_menu);
		linLay_menu = (LinearLayout) findViewById(R.id.linLay_menu);

		//mDrawerToggle抽栖用来控制开关的对象,参数固定,暂不知道有啥用,照写就是
		mDrawerToggle = new ActionBarDrawerToggle(this, /* host Activity */
		mDrawerLayout, /* DrawerLayout object */
		R.drawable.ic_launcher, /* nav drawer image to replace 'Up' caret */
		R.string.drawer_open, /* "open drawer" description for accessibility */
		R.string.drawer_close /* "close drawer" description for accessibility */
		) {
			@Override
			public void onDrawerStateChanged(int newState) {
				super.onDrawerStateChanged(newState);
				System.out.println("Changed="+newState);
				if(newState==2){					
					if(!isOpen){
						isOpen = true;
						TranslateAnimation animation = new TranslateAnimation(x,
								-linLay_menu.getWidth(), 0, 0);
						animation.setDuration(500);
						animation.setFillAfter(true);
						relLay_menu.startAnimation(animation);
						x = -linLay_menu.getWidth();
					}else {
						isOpen = false;
						isClickArrow = false;
						btn_arrow.setImageResource(R.drawable.menu_left);
						TranslateAnimation animation = new TranslateAnimation(x,
								0, 0, 0);
						animation.setDuration(100);
						animation.setFillAfter(true);
						relLay_menu.startAnimation(animation);
						x = 0;
					}
				}
			}	
		};
		mDrawerLayout.setDrawerListener(mDrawerToggle);
		
		
        final Display display = getWindowManager().getDefaultDisplay();

		iv_main_page = (ImageView) findViewById(R.id.iv_main_page);
		//启动两个动画的用意:使page图标转动起来更好看,不用转完再换图片,不美观
		anim = ObjectAnimator.ofFloat(iv_main_page, "rotationY", 0f, 90f);
		anim1 = ObjectAnimator.ofFloat(iv_main_page, "rotationY", 90f, 360f);
		btn_arrow = (ImageButton) findViewById(R.id.btn_arrow);
		btn_arrow.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if (!isClickArrow) {
					System.out.println("false");
					btn_arrow.setImageResource(R.drawable.menu_right);
					isClickArrow = true;
					mDrawerLayout.openDrawer(linLay_menu);			
					
				}
			}
		});
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		System.out.println("aaaaaaaaa");
		return super.onOptionsItemSelected(item);
	}

//	private DrawerListener mDrawerListener = new DrawerListener() {
//
//		@Override
//		public void onDrawerClosed(View arg0) {
//			System.out.println("1111111111111");
//			invalidateOptionsMenu();
//		}
//
//		@Override
//		public void onDrawerOpened(View arg0) {
//			System.out.println("2222222222");
//			invalidateOptionsMenu();
//
//		}
//
//		@Override
//		public void onDrawerSlide(View arg0, float arg1) {
//			System.out.println("33333333333333");
//			invalidateOptionsMenu();
//
//		}
//
//		@Override
//		public void onDrawerStateChanged(int arg0) {
//			System.out.println("44444444444444");
//			invalidateOptionsMenu();
//
//		}
//	};

	private void setUpViewPager() {
		// 创建FragmentPagerAdapter对象,通过内部类
		mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
		mViewPager = (ViewPager) findViewById(R.id.pager);

		mViewPager.setAdapter(mViewPagerAdapter);// 绑定适配器

		mViewPager// 对ViewPager设置监听器,监听划动到哪一个Fragment时,哪一个图标就高亮显示,否则暗色
				.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
					@Override
					public void onPageSelected(int position) {
						if (position == 0) {
							anim.setDuration(500).start();

							anim1.addListener(new AnimatorListenerAdapter() {
								public void onAnimationStart(Animator animation) {
									iv_main_page
									.setImageResource(R.drawable.main_page_one);
								};

							});
							anim1.setDuration(1000).start();
						
							

						} else if (position == 1){

							anim.setDuration(500).start();
							anim1.addListener(new AnimatorListenerAdapter() {
								public void onAnimationStart(Animator animation) {
									iv_main_page
									.setImageResource(R.drawable.main_page_two);
								};

							});
							anim1.setDuration(1000).start();					

						}
					}			
				});
	}

	// 自定义adapter
	public class ViewPagerAdapter extends FragmentPagerAdapter {

		public ViewPagerAdapter(FragmentManager fm) {
			super(fm);
		}

		@Override
		public Fragment getItem(int position) {
			switch (position) {
			case 0:
				return mFragment2;
			case 1:
				return mFragment3;
			}
			throw new IllegalStateException("No fragment at position "
					+ position);
		}

		@Override
		public int getCount() {
			return 2;
		}
	}

}



源码请去本人优快云资源页面下载,地址:http://download.youkuaiyun.com/detail/bilichen006/9379535

作者:天龙
时间:2015.12.26
本APP中很多图片都取自网络,谢谢大家!

RGBA图像格式在UI设计中的透明艺术 本文深入解析了RGBA图像格式在UI设计中的核心作用,重点阐述了Alpha通道如何实现图标无背景融合、按钮细腻交互感以及毛玻璃等高级视觉效果。文章通过实战案例与CSS代码示例,展示了RGBA在创造界面“空气感”与“层次感”方面的艺术,并指出了使用中的常见陷阱与进阶技巧,是UI设计师与前端开发者提升视觉表现力的必备指南。 阅读详情

相关推荐

移动UI透明图标设计资源包

透明图标在用户界面(UI)设计中的定位是创建一个视觉上不显突兀、能与背景融为一体的图形元素。透明度使得图标不仅仅是单独的图形标志,而是变成了能够与周围环境互动的视觉组件。这种设计的灵活性使得UI设计师可以在不同的背景和环境中重复使用图标,同时保持界面的整体美观和一致性。在图标设计中,选择合适的矢量图形编辑软件至关重要。以下是目前市场上两款最受欢迎的矢量图形编辑工具。

weixin_29155599的博客 925

android透明UI欺骗的简单实现

1.应用使用方法 将本应用运行在后台,当特定的应用启动时,本应用会自动弹出背景透明的界面,覆盖在原应用上,特别是当被覆盖应用启动时是密码输入界面时,透明UI可以欺骗用户,以达到获取用户名、密码等个人信息的目的。 2.实现原理 本程序使用到透明背景界面的创建、应用后台转前台、定时查找当前运行task和app等功能。 3.实现步骤 3.1实现透明UI 首先实现自己定义的透明主题,在res/

SHENMEGUI_32的博客 1005

Ex_Ui半透明登录界面设计实现

htmltable {th, td {th {pre {简介:Ex_Ui半透明登录界面设计是结合扁平化、简洁化以及半透明效果的现代UI设计趋势,旨在提升应用或网站的视觉吸引力和交互性。通过使用”ex_ui界面支持库”等技术支持,开发者能够构建出具有沉浸式体验和现代科技感的登录界面。掌握CSS3、HTML5、JavaScript/jQuery、响应式设计、动画效果和安全性等关键技术点,是实现这一设计的关键。

weixin_42513209的博客 916

透明之美——Transparent UI KMM,重新定义跨平台UI设计的边界

透明之美——Transparent UI KMM,重新定义跨平台UI设计的边界 项目介绍 在UI设计的世界里,透明度不仅是视觉效果的一种体现,更是用户体验与性能优化的关键因素之一。Transparent UI KMM正是基于这样的理念而生,它是一个探索和实现Jetpack Compose Multiplatform环境下透明UI组件的开源项目。 该项目由开发者SEAbdulbasit发起,灵感源自...

gitblog_00016的博客 490

《英雄联盟》游戏UI图标设计资源包:透明PNG格式

本文还有配套的精品资源,点击获取 简介:游戏界面UI设计是游戏体验的关键,本资源包提供了《英雄联盟》中的114个图标,以透明PNG格式呈现,便于美术设计和开发。透明PNG格式使图标能与各种背景无缝融合,适合复杂的游戏环境。资源包括英雄头像、技能图标等,有助于设计师学习并应用于自己的项目中。开发人员也可以利用这些图标进行测试和性能优化,以实现最佳视觉效果。 1. 游...

weixin_36047538的博客 1111

基于单片机自行车码表控制系统设计

*单片机设计介绍,基于单片机自行车码表控制系统设计。

QQ2193276455的博客 1488

ComfyUI实现透明底图——AI透明背景(ComfyUI-layerdiffuse)

本文主要记录背景透明的实现节点及模型2023年4月曾用过ComfyUI,当时就感慨这个工具和虚幻的蓝图很像,以后肯定是专业人玩的。2024年我写代码去了,AI做图没太关注,没想到,现在ComfyUI真的变成了工作室必备之物。comfyui的安装方法当年就写在这里了,不再赘述。如果你要学习的话,建议先用WebUI,然后再学ComfyUI,这样会比较容易理解流程和节点。

暂时先用这个名字 2404

细胞膜电学特性的分数阶微积分建模

分数阶微积分在细胞膜电学特性建模中的应用主要体现在对细胞膜的电容行为和神经元放电活动的更精确描述上。

冰河世纪20的博客 623

UI美化之半透明,透明效果

xml文件,style文件: 下面是自定义Activity半透明的效果例子: 1.res/values/styles.xml         @color/transparent_background      true      true        @+android:style/Animation.Translucent      2.res/values/col

反思与改变 2455

Latex里面关于作者名字显示有灰色; 二级+三级标题斜体;

Latex里面关于 作者名字显示有灰色; 二级+三级标题斜体,与正文的距离; 邮箱字体;ORCID字体设置(整理不易,请先关注,Thanks)

m0_61015717的博客 746

使用moveit!控制真实机械臂(5)——编写真实机械臂节点中的action服务程序

上一篇文章中,我们简要介绍了ROS中action的基本知识,为了控制真实机械臂,我们已经修改了moveit配置文件,使得moveti启动后具备一个control_msgs::FollowJointTrajectoryAction类型的action客户端,接下来,我们完成该类型action的另一半,编写C++程序来实现action的服务端。由于底层机器人控制程序一般差别都很大,这里展示的只是编程要点...

爱学习的草莓熊 1万+

UIView透明效果

在做UIView的透明效果时,想让UIView上的图片不透明,那么就只能设置backgroundcolor = [uicolor clearcolor],      切记不可以设置 alpha = ...;     因为设置alpha的话就相当于把UIView下的subviews也都设置成透明的了 下面记录下我的这种效果的实现方法, 以免过几天就忘了,我的烂记性: 分别是横条

沸腾的泪水的专栏 1万+

2026年数字IC设计紫光展锐笔试带答案解析

本文是一份数字IC设计工程师/芯片验证工程师的笔试样题,包含单选题和多选题两部分。单选题共20题(每题2分),涵盖数字电路、C++/Verilog编程、芯片设计基础等内容,例如D/A转换计算、面向对象编程特性、三极管工作区域、Verilog仿真时间格式等。多选题15题(每题2分),考察Hold违例修复方法、验证方法学等知识点。试卷总分100分,考试时长90分钟,题型设计兼顾基础理论与工程实践,重点测试应聘者对芯片设计核心概念和工具链的掌握程度。部分题目解析详细说明了计算过程或概念原理,如第1题通过二进制转换

Open 111

Electron Fiddle窗口透明效果:创建现代UI设计

你是否还在为传统桌面应用单调的窗口样式而困扰?是否想让你的Electron应用拥有如macOS毛玻璃效果般的现代美感?本文将系统讲解如何在Electron Fiddle中实现窗口透明效果,从基础配置到高级交互,帮助你打造视觉冲击力强的无框应用界面。读完本文你将掌握: - 透明窗口的核心配置参数与平台差异 - 半透明效果与完全透明窗口的实现方法 - 异形窗口与不规则形状设计技巧 - 透明窗口的事件...

gitblog_00911的博客 780

永磁同步电机MTPA控制详解:从理论到实践的全方位指南

永磁同步电机(PMSM)凭借其高功率密度卓越的效率以及精准的控制性能,已在工业驱动、电动汽车和家用电器等领域获得广泛应用。而在PMSM的诸多控制策略中,最大转矩电流比(MTPA)控制因其能显著提升电机效率而占据核心地位。在输出特定转矩时,通过优化直轴电流(Id)和交轴电流(Iq)的分配,使定子电流的幅值最小化。对于电机测试工程师而言,理解MTPA意味着掌握了一把提升系统性能的关键钥匙。为什么这一点如此重要?因为定子电流的减小直接带来了铜损的降低。

优快云-新能源汽车研发测试专业博主 519

【ArcGIS遇上Python】ArcGIS10.8 Python代码批量完美实现MODIS NDVI数据格式转换和投影变换

由于论文的需要,将MODIS NDVI数据进行投影变换和格式转换,具体操作可以参照:《ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换》,但是该文章中的做法只能一次性实现一景影像的转换,没法批量,虽然ArcGIS中提供了Batch的方法但是需要挨个添加数据,确定输出路径等等,本文就实现以ArcGIS10.8 Python代码批量完美实现MODIS NDVI数据格式转换和投影变换。先来看投影后的效果: 在实现批量投影转换之前,需要两个投影文件:Sinusoidal.prj和MyAl

智慧空间实验室 3815

关于UI设计设计的颜色位数、UI缩放、透明的说明

为什么80%的码农都做不了架构师?>>> ...

weixin_34232617的博客 220

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

MirrorOS:专为魔法镜和透明触控屏设计的轻量级用户界面

MirrorOS:专为魔法镜和透明触控屏设计的轻量级用户界面 项目介绍 MirrorOS 是一个专为魔法镜(Magic Mirrors)和透明触控屏幕设计的轻量级用户界面。该界面基于 NodeJS、React 和 Electron 构建而成,旨在为用户提供一个直观、交互性强的交互体验。MirrorOS 的设计理念是结合现代技术,为用户提供一个既实用又美观的信息展示平台。 项目技术分析 Mirror...

gitblog_00678的博客 619

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

SDMatte在UI设计协作中应用:Figma插件对接+透明PNG自动同步

本文介绍了如何在星图GPU平台上自动化部署SDMatte镜像,实现UI设计中的高效抠图与透明PNG生成。该方案通过Figma插件对接,支持自动同步设计稿为透明素材,特别适用于电商主图处理、UI组件提取等场景,显著提升设计团队协作效率。

weixin_28931507的博客 163

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

SDMatte在UI设计中应用:图标/按钮/插画透明底素材批量生成实战

本文介绍了如何在星图GPU平台上自动化部署SDMatte镜像,实现UI设计中透明底素材的批量生成。该AI驱动工具特别适用于图标、按钮和插画元素的快速抠图,能智能处理复杂边缘和半透明材质,显著提升设计师的工作效率。通过简单的配置,用户可轻松搭建专业级素材处理环境。

weixin_42608299的博客 356

SDMatte在UI设计中应用:图标/按钮/组件库透明底素材自动化生成

本文介绍了如何在星图GPU平台上自动化部署SDMatte镜像,实现UI设计中图标、按钮等透明底素材的快速生成。该AI模型能精准去除背景并保留边缘细节,大幅提升设计效率,特别适用于批量处理组件库素材和设计系统维护。

weixin_33072399的博客 601

OLED透明屏驱动全解析:从硬件连接到创意UI设计

OLED(有机发光二极管)作为一种自发光显示技术,其核心原理在于每个像素点都能独立发光,无需背光层。这一特性不仅带来了高对比度和快速响应,更催生了透明OLED这一创新形态。透明OLED通过采用氧化铟锡(ITO)等透明电极材料,实现了像素级的高透光率,使得显示内容能与物理背景无缝融合,极大地拓展了人机交互的想象空间。在工程实践上,驱动透明OLED与驱动普通OLED模块(如基于SSD1306芯片)的底层逻辑相通,都涉及I2C/SPI通信、显存(GRAM)操作及画点、字符显示等核心函数。开发者需掌握初始化序列、电

weixin_34408717的博客 345

潮流趋势UI素材|梯度半透明、透明套件

梯度的趋势越来越强,并整合到每个应用程序设计。 在渐变中使用的吸引人的颜色对设计来说是很好的,可以让用户着迷。 新的趋势是彩色pop和覆盖变得半透明和透明。 使用透明的元素,设计师通过这个设计创造一种感觉,让用户感觉他们可以通过层接触。 这个设计给你轻薄的感觉。 通过这样的设计,设计师往往会给出过多的信息。 页面上的信息看起来并不沉重,因为单个的设计元素是透明的,看起来也不凌乱。 这个设计必然是可访问的,因为移动设备往往有更少的屏幕空间,但又必须包含所有的信息,透明元素的设计使其视觉增强。

awayaya1的博客 222

SDMatte多场景应用:电商详情页、海报设计、UI素材库透明底构建指南

本文介绍了如何在星图GPU平台上自动化部署SDMatte镜像,实现高效AI抠图功能。该工具特别适用于电商详情页、海报设计和UI素材库的透明底构建,能精准处理复杂边缘、半透明物体等专业场景,大幅提升设计工作效率。

weixin_42594419的博客 471

干货 | 帮助创建有效用户界面的5个设计技巧

https://www.jianshu.com/p/5129fac811cb 干货 | 帮助创建有效用户界面的5个设计技巧LDesign1关注0.1832019.12.03 14:27:56字数 3,470阅读 75设计是很困难的。设计不仅是为了解决问题,而且在理想的情况下,它们应该让人们在过程中感到快乐和愉悦。设计是一种技能,是一门手艺,这门手艺并不总是那么容易获得。伟大的设计师想出一个主意,不...

gansilian的专栏 359
上一篇: android_rpg 天龙群侠传
下一篇: 对图片image进行双缓存
bilichen006
博客等级 码龄12年 93粉丝 66原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值