透明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

【数据库】SQL Server 2008 R2 安装全流程详解与常见问题避坑指南

本文详细解析了SQL Server 2008 R2的完整安装流程与核心配置。从安装前的系统兼容性检查、.NET Framework依赖准备,到图文详解实例配置、混合身份验证模式设置等关键步骤,并提供了安装失败、服务无法启动等高频问题的排查与避坑指南,帮助用户顺利完成部署。

java5的博客 1242

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

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

暂时先用这个名字 2404

奈曼-皮尔逊准则

奈曼-皮尔逊准则 如果各个假设的先验概率P(Hi)(i=0,1)P(H_i)(i=0,1)P(Hi​)(i=0,1)已知,并且每种判决的代价函数已知,这时,可以用贝叶斯准则进行判决。 如果进一步假设正确判决不付出的代价,而错误判决代价相同,即c00=c11=0,c01=c10=1c_{00}=c_{11}=0,c_{01}=c_{10}=1c00​=c11​=0,c01​=c10​=1,这时可以用最小平均错误概率准则进行判决。 在不知道先验概率P(Hi)(i=0,1)P(H_i)(i=0,1)P(Hi​)(

little_soldier的专栏 1万+

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

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

反思与改变 2455

保姆级教程:用GROMACS的FEP方法计算小分子结合自由能(附完整mdp配置)

本文提供了一份详细的GROMACS自由能微扰(FEP)计算教程,涵盖从系统准备、参数配置到结果分析的全流程。通过具体案例演示如何计算小分子结合自由能,包括λ窗口设计、动力学参数优化及并行化执行技巧,帮助研究者克服FEP计算中的常见问题,获得可靠的自由能数据。

weixin_30598225的博客 354

5分钟搞懂Paris公式:如何用裂纹扩展速率预测零件寿命(附Python代码示例)

本文详细介绍了Paris公式在裂纹扩展速率预测零件寿命中的应用,通过Python代码示例展示了从理论到实践的完整流程。文章涵盖了Paris公式的工程本质、寿命预测计算流程、几何修正因子选择以及实际案例演示,帮助工程师快速掌握这一关键技术。

weixin_29309475的博客 428

UIView透明效果

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

沸腾的泪水的专栏 1万+

ICCV 2025 | 哈工大、清华等提出首个双曲学习框架:HLFormer,革新局部相关视频检索

离原点越远,代表的语义越具体(部分)。现有方法大多在传统的欧几里得空间中对视频和文本进行建模,但这往往会导致对视频内在层次结构的错误表示,从而影响检索的准确性。通过UMAP对学习到的帧嵌入进行可视化(如下图),可以观察到,来自同一时刻的视频帧在嵌入空间中聚集在一起,清晰地展示了模型对时序关系的捕捉能力。下图的双曲空间可视化进一步证实了模型的层次建模能力:离原点越近的点,代表的语义层级越高、粒度越粗糙,反之亦然。:既然文本查询描述的是视频的一部分,那么在几何表示上,文本的嵌入向量应该从属于视频的嵌入向量。

我爱计算机视觉 1083

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

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

gitblog_00911的博客 780

Calibre 3Dstack Flow Example(5-2)

本文详细介绍了Calibre3DSTACK工具在3D-IC设计验证中的应用。主要内容包括:1)连通性检查(LVS)规则编写,重点说明connected命令的使用方法和多文本标签处理;2)设计规则检查(DRC)实现,涵盖层间距检查和焊盘重叠检查;3)系统网表生成器操作流程,从芯片导入到网连通性定义;4)两种规则文件语法(扩展语法和传统语法)的编写示例;5)验证报告文件格式解析。通过具体案例演示了如何建立完整的3D-IC验证流程,包括芯片定义、装配操作、电气连接验证和物理规则检查等关键步骤,为3D-IC设计验证

u013620135的博客 2337

【SAP ME 3】JAVA 调用SAP PO WebService

Java调用SAP PO/PI WebService接口

探索 Java 编程的技巧、最佳实践和解决方案。本博客提供针对 Java 开发者的实用指南,涵盖从基础到高级话题,旨在提升编程效率和技能。 847

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

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

weixin_34232617的博客 220

两点调制原理以及RF DAC和PLL SDM两条输入路径理解

特性数据本质原始数字比特流 (0/1)平滑后的预失真波形数据连接对象Σ-Δ调制器 (SDM)的小数输入RF DAC在系统中的角色主调制路径:通过改变PLL分频比产生频率偏移辅助补偿路径:通过RF DAC产生补偿电压,校正PLL失真可否加入延时可以且必须。用于数字时序对齐,对性能无影响。绝对不可以。会导致补偿失配,严重破坏信号频谱。功能目标实现数字域的频率调制确保模拟域的波形和频谱完美因此,在您所描述的这种先进发射机架构中,2-point数据是数字指令,送给SDM;

m0_49540263的博客 604

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

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

gitblog_00678的博客 619

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

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

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

weixin_28931507的博客 162

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

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

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

weixin_42608299的博客 356

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

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、付费专栏及课程。

余额充值